TailwindCSS 설치

Tailwind CSS v4.0 변경으로 인해 기존의 설치 방법과 조금 달라져서 기록할려고한다.

vite 전용 플러그인

npm install tailwindcss @tailwindcss/vite

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

next.js + postCSS

npm install -D tailwindcss postcss @tailwindcss/postcss # 최신 버전을 설치(자동 업그레이드)
or
npm i -D tailwindcss@4 postcss @tailwindcss/postcss # 4.x 버전 고정 설치

• Next 파이프라인

sass-loader → PostCSS → Next compiler (SWC) → output CSS

Tailwind v4의 “독립 엔진 모드(=Vite 플러그인 방식)”을 사용할 수 없다.

글로벌 CSS 파일에 입력

@import "tailwindcss";