Tailwind CSS v4 prettier 적용 안됨 이슈

nagosu·2025년 2월 14일

서론

현재 Tailwind CSS가 4버전으로 업데이트되었다.

Vite + React 기준으로 Tailwind CSS를 초기 설정하는 방식도 살짝 변경이 있었는데,

npm install tailwindcss @tailwindcss/vite

이제 @tailwindcss/vite를 바로 지원해주고,

Tailwind CSS 공식 문서의 Installation 메인에 Vite로 설명을 하는 것을 보니 Vite가 완전히 업계 표준이 된 것 같다.

tailwind css vite

Tailwind CSS를 Vite 플러그인으로 설치하는 것은 Laravel, SvelteKit, React Router, Nuxt, SolidJS와 같은 프레임워크와 가장 매끄럽게 통합하는 방법이라고 한다.

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

기존에는 tailwind.config.js 파일이 생성되고 직접 content 등을 지정했어야 했는데,

v4부터는 vite.config.ts 파일에서 @tailwindcss/vite의 tailwindcss 플러그인을 바로 import 해오는 방법으로 간단하게 변경되었다.

// 루트 css 파일
@import "tailwindcss";

그리고 루트 css 파일에서 간단하게 "tailwindcss"를 import 해주기만 하면 끝난다.

tailwind css prettier 적용 안됨

Tailwind CSS를 초기 설정하는 방법이 매우 간편해졌지만, 한가지 문제가 생겼다.

작업자마다 Tailwind CSS 클래스명을 작성하는 순서가 다르기 때문에,

이를 자동으로 정렬해주는 prettier-plugin-tailwindcss를 사용하고 있었다.

하지만 Tailwind CSS가 v4로 업데이트된 이후 .prettierrc 파일에서 prettier-plugin-tailwindcss 플러그인을 적용해도 prettier 자체가 제대로 동작하지 않는 문제가 발생했다.

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

아직 Tailwind CSS가 v4로 업데이트된 지 얼마 되지 않아 문제가 발생하는 것으로 보인다.

처음에는 v3로 다운그레이드하여 기존 방식대로 사용하려 했지만,

prettier-plugin-tailwindcss의 GitHub 이슈에서 나와 동일한 증상을 발견했다.

tailwind css prettier github issue

이슈에선 현재 모노레포 환경에서 Tailwind CSS가 .prettierrc 파일이 있는 패키지에 설치되지 않은 경우,

Tailwind CSS v4 클래스가 정렬되지 않는 문제가 발생한다고 한다.

해결 방법

하지만 이슈의 댓글에서 임시 해결 방안을 찾을 수 있었다.

tailwind css prettier solution

.prettier.config.js 파일을 만들어 tailwindStylesheet으로 tailwindcss가 import된 css 파일의 경로를 직접 지정해주는 것이다.

바로 나의 프로젝트에 적용해보았다.

// .prettierrc.json
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

루트 폴더의 .prettierrc.json에는 기존의 prettier 설정 내용과 prettier-plugin-tailwindcss를 플러그인으로 설정하는 코드가 들어있다.

// .prettier.config.ts
import config from "./.prettierrc.json" with { type: "json" };

export default {
  ...config,
  tailwindStylesheet: "./src/index.css",
};