설치

pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• tailwind.config.js, postcss.config.js 생성

tailwind.config.js

content

어떤 파일에서 tailwind를 사용할 것인지 명시하는 필드

(예시)

content: [
  "./pages/**/*.{js,jsx,ts,tsx}",
  "./components/**/*.{js,jsx,ts,tsx}",
],

• pages 디렉토리 아래의 모든 파일 중 [js,jsx,ts,tsx]의 확장자를 가진 파일

darkMode

다크모드를 시스템 설정에 따라갈 것인지 선택함.

• media (디폴트)
  • 시스템 설정을 따라감
• class
  • className에 dark가 있는 앨리먼트와 자손 앨리먼트들을 다크모드로 설정함

module.exports = {
  ...
  darkMode: "class",
};

리셋 코드

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