[React] Tailwind

tailwind, postcss, autoprefixer 설치

npm install -D tailwindcss postcss autoprefixer

tailwind config 파일 생성

npx tailwindcss init -p

tailwind.config.js 파일 설정

tailwind 를 적용할 파일들의 path 설정

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

 

global.css 파일 설정

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

이 단계에서 `Unknown at rule @tailwind css` 에러 문구 발생시 PostCSS Language Support 플러그인을 설치해주면 해결된다