Tailwind CSS 설치 및 적용법

1. Shell

yarn add tailwindcss postcss autoprefixer -D

npx tailwindcss init -p

 

2. tailwind.config.js 설정 파일의 content 에 tailwind를 사용할 모든 경로를 입력합니다.

module.exports = {
    content: [  // tailwind를 사용할 경로들을 입력
      "./pages/**/*.{js,jsx,ts,tsx}",
      "./components/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

 

4.

_app.tsx 에 import 되어있는 styles/globals.css 내부 내용들을 모두 삭제하고

@tailwind base @tailwind component @tailwind utilities 를 추가하여

tailwind에서 제공하는 base, component 그리고 utilities를 사용 할 수 있도록 합니다.

 

@tailwind base;

@tailwind components;
​
@tailwind utilities;