[CSS] Tailwind CSS

Tailwind CSS

Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

① Tailwind CSS 설치

코드를 입력하세요

② tailwind.config.js

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

최적화 하기
파일 크기를 최소화하기 위해 purge 옵션을 사용한다.
프로덕션으로 빌드할 때 여기에 설정된 파일에서 사용되지 않는 모든 클래스는 제거 된다.

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  ...
}

③ postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

③ CSS에 Tailwind 지시문 추가

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

// app.js
import "tailwindcss/tailwind.css";

➕ 기본 설정 커스텀하기

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
      serif: ["Merriweather", "serif"],
    },
  },
};

// tailwind.config.js

module.exports = {
  ...
  theme: {
    ...
    extend: {
      colors: {
        primary: '#8ffebf',
      },
      ...
    },
  },
  variants: {
    extend: {
      borderWidth: ['hover'],
    },
  },
  ...
}

➕ 반응형 스타일 설정하기

모바일 퍼스트이며 md:XX와 같이 prefix에 설정한 breakpoint 값에 따라 변경된다.

장점

① Utility-First의 편리함과 빠른 개발

스타일 코드가 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없다.

➡ HTML-CSS를 왔다갔다하며 시간을 쓰거나 위의 이미지처럼 화면을 분할해서 사용하지 않아도 된다.

➡ 클래스명을 검색해가며 일일이 필요한 CSS 코드를 찾을 수고도 사라진다. 또한 클래스명을 고민하는 일도 없어진다.

② 일관된 디자인

모든 곳에서 동일한 색상이나 사이즈, 간격 등의 유틸리티 클래스를 사용하므로 일관된 스타일로 구현하기가 수월하다.

③ Intelli Sense

미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원하기 때문에 조금만 익숙해지면 금방 문서 없이 개발할 수 있다.

단점

① 못생긴 코드

② 초반 클래스명 러닝 커브

각 스타일의 클래스명을 익히느라 개발하는 내내 문서를 참고해야 하는 번거로움이 있다.
하지만 Intelli Sense 플러그인이 있어서 금방 익숙해진다.

③ JavaScript 코드 사용 불가

JavaScript 변수 값에 따라 가로 길이를 설정하는 등의 구현은 가능하기는 하지만 무척 번거로운 설정이 필요하다.