tailwindcss
-
[tailwindcss] 동적으로 클래스 이름 삽입하기개발/HTML CSS 2022. 9. 17. 23:09
const labelClasses = [ "blue", "indigo", "gray", "green", "red", "purple", ]; //.. {labelClasses.map((labelClass, index) => ( setSelectedLabel(labelClass)} className={`w-6 h-6 bg-${labelClass}-500 rounded-full flex items-center justify-center cursor-pointer`} > {selectedLabel === labelClass && ( check )} ))} 위 코드처럼 동적으로 클래스 이름을 만들 때 문자열을 조각내면 tailwind가 클래스 이름을 찾지 못한다. 완전한 이름으로 넣어주도록 하자. const la..
-
[tailwindcss] 최초 설정개발/Javascript 2022. 1. 31. 01:32
tailwind 공식 사이트의 문서의 가장 처음에 보이는 문구입니다. tailwindcss는 클래스 이름에 대해 모든 HTML 파일, 자바스크립트 컴포넌트와 다른 템플릿을 스캔하고 상응하는 스타일을 생성해 이들을 정적 css 파일에 씁니다. tailwindcss를 안 써본 입장에서는 무슨 소리인가 싶을 겁니다. 쉽게 설명하면 tailwindcss도 부트스트랩처럼 프레임워크에서 제공하는 클래스 이름을 통해 스타일을 적용할 수 있는데, 사용된 클래스 이름을 검색해 css 파일을 만들어준다는 것입니다. 아직도 정확히 무슨 말인지 와닿지 않을 겁니다. 조금 더 살펴 봅시다. CLI 설치 기준입니다. 1. Install Tailwind CSS npm install -D tailwindcss npx tailwind..