저번 포스트로 아무튼 빠른 Vite를 이용한 프로젝트 생성을 해봤습니다. 그렇다면 이제 Tailwind CSS를 프로젝트에 추가해봅시다.

패키지 설치

Tailwind CSS를 사용하기 위한 필수 패키지를 설치해봅시다.

npm i tailwindcss@latest

tailwindcss는 Tailwind CSS의 코어 패키지입니다.

npm i postcss@latest

postcss는 Tailwind CSS를 우리가 알고 있는 순수한 CSS로 변환해주는 전처리기 패키지입니다.

npm i autoprefixer@latest

autoprefixer는 브라우저별로 다르게 지원되는 벤더 프리픽스를 자동으로 넣어주는 패키지입니다.

설정

Tailwind CSS를 사용하려면 CSS로 변환해주는 전처리기가 필요합니다. 그 역할을 아까 설치한 postcss가 해줍니다. 파일을 생성하고 작성합시다.

postcss.config.cjs

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

다음으로는 Tailwind CSS의 설정을 해주겠습니다.

npx tailwindcss init

참 간편합니다.

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

이렇게 생긴 파일이 생성되었을 겁니다.
여기에 content를 추가하겠습니다

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

이제 우리는 src 폴더에 있는 js, jsx, ts, tsx 확장자의 파일에서 tailwindcss를 사용할 수 있습니다. 물론 index.html에서도 사용 가능합니다.

적용

마지막으로 적용만 하면 끝입니다.
main.jsx혹은 index.js에 포함될 globl.css 파일을 생성하겠습니다. index.css를 사용해도 됩니다.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

위 3줄을 추가한 후에 해당 파일을 root 파일에 import 해주시면 바로 사용이 가능합니다.