[tailwindcss v4] PostCSS 플러그인 호환 문제 해결

[vite] Internal server error: [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration. Plugin: vite:css

Pre-ransform error: [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.

The PostCSS plugin has moved to a separate package,

so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

 

🧨 에러 원인 요약

Tailwind CSS v4부터는 더 이상 tailwindcss 패키지를 직접 PostCSS 플러그인으로 사용하지 않아요.

// ❌ 기존 방식 (더 이상 동작하지 않음)
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

---

✅ 해결 방법

1. @tailwindcss/postcss 패키지 설치

pnpm add -D @tailwindcss/postcss

---

2. postcss.config.cjs 수정

// postcss.config.cjs
const tailwindcss = require('@tailwindcss/postcss')

module.exports = {
  plugins: [
    tailwindcss(),
    require('autoprefixer'),
  ],
}

 

@tailwindcss/postcss() 는 v4에서 공식적으로 제공하는 새로운 PostCSS 플러그인이에요.

---

🔍 참고로 Tailwind v4 이상부터...

Tailwind는 PostCSS와의 통합을 약간 변경했기 때문에, tailwind.config.js와 postcss.config.cjs 설정이 함께 잘 맞아야 합니다.

• tailwind.config.js는 그대로 유지해도 괜찮습니다.
• 하지만 PostCSS 설정은 위처럼 신규 패키지 사용 방식으로 바꿔야 해요.