[7/29 TIL]tailwind css 설치

tailwind css

실전 프로젝트에 돌입했다. 팀원분이 tailwind css를 아시냐고 물으셔서 바로 검색했다. 사실 이전에 가볍게 알아본 적이 있다. 미리 준비된 css 클래스를 사용하여 스타일링 하는 라이브러리라 알고 있었다. 그런데 클래스를 커스텀 할 수 있고 스타일 컴포넌트와 함께 사용 가능하다고 한다. 난 지금까지 스타일링을 변수로 저장해서 사용하는 방법만 몰두하였는데 더 좋은 방법을 찾은 것 같다. tailwind css에 대해 조사하면서 아토믹 디자인 시스템에 대해서도 알게 되었다. 사실 스타일 속성에 대해 변수로 저장해서 사용한다는 것 자체가 디자인 시스템이 마련된 상태에서 들어가는 작업이라 생각한다. 그런데 디자이너 분께서 스타일 가이드나 디자인 시스템을 먼저 마련해 주시기 어려울 것 같아 이것을 실전에 적용시킬지는 내일 상의해 봐야 할 것 같다.

설치

yarn add tailwindcss postcss autoprefixer

styled-components와 같이 사용하려면

yarn add twin.macro styled-components

설정

postcss.config.js

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

extend 객체 안에 클래스를 커스텀하여 넣어서 계층적으로 사용할 수 있다.