설정 파일이 사라진 Tailwind — v4가 CSS로 돌아온 이유

이 블로그는 Tailwind를 안 써요.

그런데 v4가 나온 걸 보고는 “어, 이건 좀 다른데” 싶었어요.

그동안 Tailwind가 얹고 있던 층을, 이번엔 걷어냈더라고요.

가장 크게 바뀐 건 설정이 CSS로 들어온 거예요.

예전엔 tailwind.config.js라는 자바스크립트 파일에 색·간격·폰트를 적었어요.

CSS를 쓰려고 자바스크립트 객체를 관리하는, 조금 얄궂은 구조였죠.

v4는 그걸 CSS 안 @theme 블록으로 옮겼어요.

@import "tailwindcss";

@theme {
  --color-nacre: #5a6b6a;
  --font-display: "Pretendard", sans-serif;
  --spacing-gutter: 1.5rem;
}

여기 적은 값이 곧 유틸리티가 돼요.

--color-nacre를 정의하면 bg-nacre·text-nacre가 자동으로 생기고, 동시에 var(--color-nacre)로도 그냥 쓸 수 있어요.

설정과 CSS 변수가 둘로 나뉘어 있던 걸, 하나로 합친 거예요.

엔진도 새로 썼어요.

Oxide라는 이름의 Rust 기반 엔진으로 갈아끼우면서, 빌드가 크게 빨라졌어요.

PostCSS·autoprefixer·postcss-import 같은 걸 따로 물려주던 것도 대부분 안으로 들어와서, 설정 파일 여러 개가 사라졌고요.

”어떤 클래스를 실제로 썼는지” 훑어 찾는 것도 자동이 돼서, content 경로를 손으로 적어주던 일도 없어졌어요.

컨테이너 쿼리 같은 요즘 CSS도 플러그인 없이 기본으로 들어왔어요.

요즘 CSS가 미쳤다에서 정리했던 그 기능들을, 프레임워크가 별도 설치 없이 품게 된 거예요.

그래서 결이 바뀌었어요.

예전 Tailwind는 “CSS 위에 자바스크립트 설정 층을 하나 더 얹는” 도구였는데, v4는 “CSS 자신의 기능으로 최대한 돌아가는” 쪽으로 방향을 틀었어요.

@import, CSS 변수, @layer, color-mix 같은 표준을 바탕으로 삼으니까요.

빌드 도구가 아니라 CSS 위에 서게 된 거죠.

퍼블리셔 시절 감각으로 보면 이 이동이 반가워요.

내가 플레인 CSS를 고른 이유가 “가장 안 변하는 바닥에 얹고 싶어서”였는데, Tailwind가 스스로 그 바닥 쪽으로 내려온 셈이니까요.

설정 파일, 전처리기, 플러그인 목록 — 그렇게 쌓아 올렸던 층을 하나씩 걷어내는 방향이었어요.

물론 나는 여전히 안 써요.

이 정도 규모의 개인 블로그엔 유틸리티 클래스보다 손으로 짠 CSS가 더 맞고, 그게 취향이니까요.

다만 “덜어낸 도구가 더 좋은 도구”라는 이 블로그의 믿음을, 큰 프레임워크가 스스로 증명하는 걸 보는 건 즐거워요.

정리하면, Tailwind v4의 이야기는 기능 추가가 아니라 덜어냄이에요.

자바스크립트 설정을 CSS로, 여러 도구를 엔진 하나로, 손으로 적던 경로를 자동으로.

쌓는 게 아니라 걷어내는 방향으로 큰 버전을 올렸다는 점에서, 도구가 성숙하면 어디로 가는지를 잘 보여주는 사례라고 생각해요.

댓글