[tailwindcss] 최초 설정

tailwind 공식 사이트의 문서의 가장 처음에 보이는 문구입니다.

tailwindcss는 클래스 이름에 대해 모든 HTML 파일, 자바스크립트 컴포넌트와 다른 템플릿을 스캔하고 상응하는 스타일을 생성해 이들을 정적 css 파일에 씁니다. 

 

tailwindcss를 안 써본 입장에서는 무슨 소리인가 싶을 겁니다. 쉽게 설명하면 tailwindcss도 부트스트랩처럼 프레임워크에서 제공하는 클래스 이름을 통해 스타일을 적용할 수 있는데, 사용된 클래스 이름을 검색해 css 파일을 만들어준다는 것입니다. 아직도 정확히 무슨 말인지 와닿지 않을 겁니다. 조금 더 살펴 봅시다. CLI 설치 기준입니다.

 

1. Install Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

 

2. Configure your template paths

스타일을 적용할 컨텐츠의 경로를 지정하는 것입니다. html 파일이 루트에 있어서 다음과 같이 지정했습니다.

module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

3. Add the Tailwind directives to your css

css 파일에 필요한 클래스들을 만들어줍니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

4. Start the Tailwind CLI build process

--watch를 붙이면 변경사항이 생길 때마다 자동으로 rebuild를 해줍니다. 즉 스타일링을 하면서 클래스를 추가할 때마다 rebuild가 일어나면서 해당 클래스가 자동으로 output.css에 추가됩니다. --watch를 붙이지 않으면 클래스를 추가할 때마다 수동으로 아래 명령어를 실행시켜줘야 합니다. tailwinds는 사용되는 클래스만 css 파일에 추가되기 때문에 커스터마이징이 쉬우며 프로덕션 빌드를 할 때는 --minify 플래그를 통해 최적화를 진행할 수도 있습니다.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

 

위의 클래스들은 사용된 것만 css 파일에 추가된 상태입니다.