Tailwind V 4.0 config.js 어디로?

 

개요

 

Tailwind를 새로운 프로젝트에서 사용 중 tailwind.config.js가 작동하지 않는 문제를 겪었다.

 

Next.js를 15버전을 사용하며 바뀐게 있나 확인하며 여러 시도를 했으나 버그는 고쳐지지 않고 오히려 이외의 라이브러리 버전 및 postcss.config, global.css등 어디까지 내가 바꾼거였는지 헷갈렸다.

 

Tailwind 버전을 보니 낯선 4로 시작하는 버전이었다(4.13). 설마 4버전에서 config 파일관련 변경사항이 있었나 했는데 맞았다...

 

 

Tailwind V4.~ config 파일 적용

 

 

가장 큰 변화 중에 하나로 v4 부터는 Content-Aware Engine이 도입되어 설정없이 사용이 가능하다고 한다.

 

따라서 기존에 tailwind.config.js에 작성한 코드를 일반 css파일에 작성하면 된다는 것인데

 

나 같은 경우에 돌아가지 않았던 config 파일을 아래와 같이 작성했다.

 

/** @type {import('tailwindcss').Config} */

const config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        main: {
          1: "#DFF6FF",
          ...
		}
      },
    },
  },
};

export default config;

 

보통 여러 색상 혹은 레이아웃을 지정하고 사용할텐데 이걸 이제는 아래와 같이 사용하면 된다.

 

 

CSS first 방식

 

@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-main-1: oklch(0.99 0 0);
  /* ... */
}

 

다른 폰트를 제외하고도 지정이 가능하다는걸 보여주기위해 추가했다.

 

개인적으로는 config를 프로젝트 4개 연속 사용한 입장으로서는 낯설고 번거롭지만 Tailwind CSS 엔진에 직접 통합되어 성능이 더욱 최적화되었기에 사용을 지향하는 것 같다.

 

 

난 아직 config가 좋아 Config.js 그대로 사용법

 

본인에 해당한다. 위 방법이 성능이 좋은거는 알고있으나.. 이미 속성도 여러 개 선언했고, 이번 프로젝트는 1인 포폴 페이지 만드는 페이지로 성능은 후순위이기에 config를 그대로 사용하는 방법을 찾았다

 

tailwind.config.js파일 내부에선 따로 손볼 것은 없고 tailwind를 import하는 css 파일에서 config파일을 따로 @config선언해주면 된다

 

global.css

@import "tailwindcss";
@config "../../../tailwind.config.js";

 

 

추가로 위와 같은 config 방식과 Css First 방식은 혼용이 가능하다.

 

마이그레이션을 하는 경우엔 조금씩 속성을 도입하면서 쓰는게 좋을 것 같다 다만 주의 할 점으로는

 

우선적용이 cssFirst방식이 우선 적용되므로 혼용을 주의해서 사용하는게 좋을 것 같다

 

---

 

그럼에도 위 방법을 사용하는게 좋은 이유는 성능에도 있지만

 

공식문서를 읽다보니 위 방법과 관련된 여러 변화점이 있는데 config.js를 쓰는 것 보다 새롭게 제안한 방법을 쓸 때 더 편리한 상황이 많이 연출되는 것 같다.

 

내일은 tailwind 4버전의 다른 변경점들도 정리하려고 한다