Tailwind CSS

TailwindCSS

1. Tailwind는 Utility-First를 지향하는 CSS 프레임 워크이다. Styled-component와 비교하였을 때 스타일 시트를 오가는 컨텍스트 스위칭이 없어 개발속도가 빨라 생산성이 높다. 또한 SCSS와 비교하였을 때도 클래스 이름을 시맨틱 정하기 위해 고민하지 않아도 되기에 개발 효율을 높일 수 있다는 부분이 장점이다.

2. 개발속도가 빠르기에 생산성이 높다.

3. 클래스 이름을 시맨틱하게 정하기 위해 고민하지 않아도 된다.

초기설정

TailwindCSS 설치

npm install -D tailwindcss postcss autoprefixer

tailwind.config 생성

npx tailwindcss init (-p를 붙이면 postcss.config.js파일까지 생성)

tailwind.config.js 파일 생성

npx tailwindcss-cli@latest init

tailwind.config

   // tailwind.config.js
   module.exports = {
     purge: [],
     darkMode: false, // or 'media' or 'class'
     theme: {
       extend: {},
     },
     variants: {
       extend: {},
     },
     plugins: [],
   }

darkMode

• media

  유저의 시스템 설정에 따라 자동으로 적용. 즉 내가 Chrome에서 다크모드를 사용하고 있으면 자동으로 다크모드 UI를 보여준다.
  

• class

  시스템 설정에 의존하지 않고 다크모드 토글링을 지원하고 싶다면 사용.
  

purge

아래와 같이 모든 프로젝트의 template 파일 경로 array를 추가할 것을 권장한다. 그 이유는 production 과정에서 사용하지 않는 스타일들을 자동으로 제거해서 최종 빌드 사이즈를 최적화해주기 때문이다.

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

CSS 파일에 추가하기

이제 create-react-app이 자동으로 생성한 디폴트 파일인 ./src/index.css파일에 아래와 같이 추가하면 모든 준비가 끝났다.

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

클래스 자동 정렬 플러그인

npm install -D prettier prettier-plugin-tailwindcss