지난 1월 23일에 Tailwind CSS v4가 정식 출시되었습니다.
주요 변경사항과 함께 성능과 사용성이 더욱 향상되었습니다.

• 최대 100배 더 빠른 빌드 속도
• 설치 및 구성 코드 최소화
• 최신 CSS 기술(@layer, @property, color-mix() 등) 적극 활용
• 컨테이너 쿼리, 3D 변환, 새로운 색상 시스템 지원
• JS 없이도 CSS에서 직접 설정해 더 직관적인 커스터마이징 가능

최신의 Next.js 15 프로젝트를 설치하면 기본적으로 Tailwind CSS v4가 적용됩니다.
기존 Next 프로젝트에서 Tailwind CSS v4를 사용하고 싶다면 다음 과정으로 구성해 보세요.

먼저 각 패키지를 최신 버전으로 설치합니다.

1
npm i -D tailwindcss@4 postcss @tailwindcss/postcss

PostCSS 구성의 옵션 이름을 변경합니다.

1
2
3
4
5
6
7
8
9
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    // tailwindcss: {}
    "@tailwindcss/postcss": {}
  }
}

export default config

전역으로 가져오는 스타일 코드도 변경합니다.

1
2
3
4
5
6
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
@import "tailwindcss";

/* 생략.. */