PostCSS가 탄생한 배경

CSS 개발은 브라우저 호환성과 벤더 접두사같은 문제로 어려움을 겪어왔다.
이런 어려움을 극복하기 위해 루비언어로 만든 Sass/SCSS라는 스타일 언어가 탄생했다.
벤더 접두사 문제를 해결해 주는 autoprefixer라는 플러그인을 제공해 지금도 큰 인기를 끌고 있다.
사실상 부트스트랩을 비롯해 널리 알려진 CSS 프레임워크는 대부분 Sass/SCSS로 만들어졌다.

그러던 와중에 '모듈화된 CSS' 라는 슬러건을 내걸으며 PostCSS라는 이름의 새로운 스타일 언어와 이를 동작하게 하는 프로그램이 탄생했다.

PostCSS는 자바스크립트의 바벨과 같이 다양한 플러그인을 자유롭게 장착할 수 있도록 하여, CSS 표준에 추가되기를 요청하는 많은 기능을 표준화 이전에 실험해 볼 수 있게 했다.
당연이 autoprefixer 도 PostCSS의 플러그인으로 제공된다.

PostCSS는 webpack이 1차로 만든 CSS를 가공하여 최종 CSS를 생성한다.
즉, PostCSS는 웹팩의 플러그인이고 autoprefixer는 PostCSS의 플러그인이다.
이렇듯 PostCSS가 발전하자 CSS 디자이너들은 점차 Sass/SCSS 보다 PostCSS를 더 선호하기 시작했다.

TailwindCSS는 PostCSS 플러그인 방식으로 동작하는 CSS 프레임워크이다.

TailwindCSS 사용하기

PostCSS와 autoprefixer, TailwindCSS 설치하기

autoprefixer는 사용자 CSS가 벤더 접두사를 붙이지 않더라도 후처리 과정에서 자동으로 벤더 접두사가 붙은 CSS를 생성해 준다.

autoprefixer는 tailwindCSS와 마찬가지로 PostCSS의 플러그인 형태로 동작하므로 autoprefixer기능을 사용하려면 PostCSS도 함께 설치해야 한다.

npm i -D postcss autoprefixer tailwindcss

구성파일 만들기

PostCSS가 tailwindCSS를 플러그인으로 동작시키려면 postcss.config.js 파일에 tailwindCSS를 등록해야 한다.
또한 tailwindCSS는 PostCSS와는 별도로 자신만의 구성 파일이 있어야 한다.

tailwindCSS는 이런 2가지 구성 파일을 쉽게 생성할 수 있도록 다음 명령을 제공한다.

npx tailwindcss init -p

postcss.config.js 파일

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

tailwindcss.config.js 파일

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

daisyui 패키지 설치하기

tailwindCSS는 부트스트랩과 같은 CSS 프레임워크를 쉽게 개발할 수 있게 해주는 저수준 프레임워크이다.
따라서 tailwindCSS 자체에서 CSS 컴포넌트들을 제공하지 않는다.

하지만 tailwindCSS를 사용해 부트스트랩처럼 CSS컴포넌트를 제공하는 다양한 tailwindCSS 컴포넌트가 있으며 이들은 모두 tailwindCSS의 플러그인 형태로 동작한다.
이중 무료로 제공하는 컴포넌트가 가장 많은 daisyui 플러그인이 있다.

npm i -D daisyui

@tailwindcss/line-clamp 플러그인 설치하기

tailwindCSS의 플러그인 이름에 @tailwindcss/ 라는 접두사가 붙은 패키지는 tailwindCSS 제작사가 직접 만들어 제공하는 것이다.
@tailwindcss/line-clamp 는 여러 줄의 텍스트를 지정한 수의 줄로 잘라서 표시해주는 플러그인이다.

npm i -D @tailwindcss/line-clamp

tailwindcss 구성 파일 수정하기

tailwindCSS의 기능 중에 사용하지 않은 rule들은 빌드 때 제거해 CSS 크기를 최소화할 수 있게 하는 기능이 있다.
이 기능을 사용하려면 다음과 같이 구성해야한다.
또한 앞서 설치한 플러그인도 등록한다.

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

구성 파일을 수정하면 HMR로는 안된다.
서버를 재시작해야 된다.

tailwindCSS 기능 반영하기

src/index.css

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

tailwindCSS 테스트 코드 작성하기

const Tailwindcss = () => {
  return (
    <div className="bg-black/70">
      <p className="w-full p-4 text-3xl text-white">Tailwindcss</p>
      <p className="italic text-gray-50 line-clamp-3">{D.randomParagraphs(10)}</p>
      <button className="btn btn-primary" style={{textTransform: 'none'}}>
        Button
      </button>
    </div>
  )
}