Tailwind CSS 4.X.X 설치

Tailwind CSS는 v4부터 PostCSS 플러그인 구조가 변경되면서 기존에 많이 쓰이던 설정 방식과 조금 달라졌다.

처음 설치할 때 문서, 블로그, 예제마다 방법이 달라서 혼란스러웠고 여러 시도 끝에 가장 안정적으로 동작한 설정을 정리해본다.

tailwind 설치

npm install -D tailwindcss @tailwindcss/postcss postcss

설치 패키지 설명

• tailwindcss
  → Tailwind CSS 핵심 패키지

• @tailwindcss/postcss
  → v4부터 사용되는 공식 PostCSS 플러그인

• postcss
  → CSS 빌드 도구

❗ v4부터는 tailwindcss를 직접 PostCSS 플러그인으로 등록하지 않는다.

참고

• Next.js를 create-next-app으로 생성할 경우 옵션에 따라 Tailwind CSS가 자동 설치되기도 한다.

PostCSS 설정 (postcss.config.mjs)

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

global.css

@import "tailwindcss";



@import "tw-animate-css"; /* 애니메이션 유틸리티 사용 시 추가 */


/* css... */