Tailwind

어원

• Tail (꼬리 ) Wind (바람)
• 뒷바람

장점

• bundle 사이즈 작음
• css를 위한 네이밍 안해도 됨
  - 기존 css 네이밍을 위해서 개발자들은 머리를 싸맴
  

단점

• html 코드 난잡 하고 복잡하게 느껴짐
• 코드의 목적이 불분명 해짐

설치

• npm install --save tailwindcss@latest postcss@latest autoprefixer@latest

• yarn add tailwindcss@latest postcss@latest autoprefixer@latest

• 중간에 postcss가 붙는 이유
  - postCSS를 사용하면 autoprefixer 플러그인으로 밴더프리픽스를 쉽게 적용할 수 있다. 해당 스펙을 지원하지 않는 이전 버전 웹 브라우저에서도 사용할 수 있도록 IE는 -ms-, 크롬/사파리(같은 웹킷 계열)는 -webkit-, 파이어폭스는 -moz-, 오페라는 -o- 의 밴더프리픽스를 사용하는데, autoprefixer는 CSS 속성 중 밴더프리픽스가 필요한 경우에 자동으로 붙여주는 postCSS 플러그인 중 하나이다.

Webpack 설정

module.exports = {
    // 로더 등록
    module: {
        rules: [
            {
                test: /\.css?$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
                exclude: ['/node_modules/'],
            },
        ],
    },
};

초기화

• npm tailwind init -p

도움 되는 vscode 플러그인

• https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

config 커스텀