React를 공부하며 Next.js와 같은 여러 프레임워크를 접해보고 있다.
그러며 Tailwind CSS도 접하게 되었는데, 여러 시니어분들도 추천을 하시고 실제 현업에서도 사용 비율이 점점 높아지고 있다는 이야기를 들으며 더 알아보고자 정리해보려고 한다.
이 글은 Tailwind CSS v4 기준으로 작성되었다.
기존 CSS 작성 방식
처음 React를 공부할 때는 일반 CSS 방식으로 스타일을 작성했다.
<button className="btn-primary">버튼</button>.btn-primary {
background-color: blue;
padding: 8px 16px;
border-radius: 8px;
}이 방식은 가장 익숙하고 이해하기에는 쉬웠다.
하지만 프로젝트가 커질수록 몇 가지 불편한 점이 있다
- 클래스 이름을 계속 고민해야 함
- css 파일 이동이 많아짐
- 스타일 충돌 가능성 존재
- 어디에서 사용되는 클래스인지 찾기 어려움
그래서 이후에는 CSS Module이나 styled-components 방식도 사용해보게 되었다.
Tailwind를 처음 접하였을 때
솔직히 처음에는 코드가 오히려 복잡해보였다.
<button className="bg-blue-500 px-4 py-2 rounded text-white"> 버튼 </button>스타일이 전부 className 안에 들어가 있다 보니 HTML이 너무 길어 보인다는 느낌도 있었다.
"오히려 더 불편하지않은가?" 라는 생각도 들었지만 현업에서 많이 사용하는 이유를 찾아보고자 더 공부해보려고 마음먹었다.
Tailwind의 장점
빠른 UI 개발
Tailwind는 미리 정의된 utility class를 조합해서 스타일을 작성하는 방식이다.
<div className="p-4 bg-white rounded-lg shadow-md">기존 CSS처럼
- CSS 파일 생성
- 클래스 이름 작성
- 다시 컴포넌트로 이동
과정을 반복하지 않아도 되기 때문에 빠르게 화면을 구성할 수 있다는 장점이 있다고 한다.
특히 프로토타입 제작이나 초기 UI 작업 속도가 빠르다는 의견이 많았다.
class명 고민 ❌
기존 CSS에서는 스타일을 만들 때마다 이름을 계속 지어야 했다.
.container {}
.wrapper {}
.box {}
.card {}
프로젝트가 커질수록 이름이 겹치거나, 어떤 역할인지 애매해지는 경우도 있었다.
하지만 Tailwind는 이미 정의된 utility class를 조합하는 방식이라 이런 고민이 줄어든다고 한다.
전역 클래스 명 충돌 걱정 감소
기존 CSS는 전역 스타일 충돌 문제가 자주 발생한다.
특히 여러 사람이 함께 작업하는 프로젝트에서는 같은 클래스 이름을 사용하는 상황도 생길 수 있다.
Tailwind는 필요한 utility class를 직접 조합해서 사용하는 방식이기 때문에, 전역 클래스 이름이 겹칠 걱정이 상대적으로 줄어든다는 장점이 있다.
(CSS Module이나 styled-components처럼 스코프를 완전히 격리해주는 방식은 아니지만, 클래스 이름 충돌로 인한 문제는 훨씬 덜 발생한다.)
반응형 작업에 용이
Tailwind는 반응형 스타일을 쉽게 작성할 수 있도록 breakpoint 문법을 제공한다.
<div className="text-sm md:text-lg lg:text-2xl">별도의 media query를 작성하지 않아도 되기 때문에 반응형 UI를 빠르게 적용할 수 있다는 점이 많이 언급되었다.
React / Next.js 생태계와 좋은 궁합
최근 React 기반 프로젝트에서는 Tailwind를 사용하는 경우가 많다고 한다.
특히
- Next.js
- shadcn/ui
- Vercel 기반 프로젝트
등 최신 React 생태계와 함께 자주 사용된다는 점도 특징이라고 느꼈다.
컴포넌트 기반 개발 방식과 utility class 방식이 잘 어울린다는 의견도 많았다.
디자인 규칙 유지
Tailwind는 spacing, color, size 등이 일정한 규칙 안에서 제공된다.
그래서 프로젝트 전체에서 디자인 스타일을 통일하기 쉽다는 장점이 있다고 한다.
여러 명이 함께 작업할 때 UI 일관성을 유지하는 데 도움이 된다는 글들도 많이 볼 수 있었다.
현업에서 자주 쓰이는 cn() 패턴
현업 React + Tailwind 코드를 보면 아래와 같은 패턴이 자주 등장한다.
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs) {
return twMerge(clsx(inputs));
}<button className={cn("px-4 py-2 rounded", isActive && "bg-blue-500", "bg-gray-200")}>
버튼</button>clsx는 조건부 클래스를 깔끔하게 처리해주고tailwind-merge는 충돌하는 클래스를 자동으로 합쳐준다
shadcn/ui 같은 라이브러리에서도 이 패턴을 기본으로 사용하고 있어서, Tailwind를 실제로 사용하게 된다면 함께 알아두면 좋을 것 같다.
Tailwind v4에서 달라진 점
2025년 초에 Tailwind CSS v4가 정식 릴리즈되면서 설정 방식이 꽤 달라졌다.
공식 문서를 보면서 따라할 때 버전 차이로 혼란스러울 수 있으니 알아두면 좋다.
| 항목 | v3 | v4 |
|---|---|---|
| 설정 파일 | tailwind.config.js | CSS 파일 내부에서 직접 설정 |
| 임포트 방식 | @tailwind base/components/utilities | @import "tailwindcss" |
| content 경로 | 직접 지정 필요 | 자동 감지 |
| 빌드 속도 | 빠름 | 훨씬 더 빠름 |
Tailwind가 무조건 정답일까?
여러 자료를 찾아보면서 Tailwind가 무조건 모든 프로젝트의 정답은 아니라는 의견도 많았다.
대표적인 단점과 함께, 현업에서 어떻게 대응하는지도 정리해보았다.
| 단점 | 현업에서의 대응 |
|---|---|
| className이 길어진다 | React 컴포넌트로 추상화하거나 cn() 패턴 활용 |
| 처음에는 가독성이 떨어진다 | IDE 플러그인(Tailwind CSS IntelliSense)으로 자동완성 지원 |
| HTML이 복잡해 보인다 | 컴포넌트 단위로 분리하면 어느 정도 해소됨 |
그래서 프로젝트 규모나 팀 스타일에 따라
- 일반 CSS
- CSS Module
- styled-components
- Tailwind
중 적절한 방식을 선택하는 것이 중요하다고 느꼈다.
처음에는 단순히 “요즘 많이 사용하는 CSS 방식” 정도로 생각했다.
하지만 여러 자료를 찾아보면서 Tailwind는 단순 유행이라기보다 빠른 UI 개발과 유지보수를 고려한 방식이라는 점을 조금 이해할 수 있었다.
아직 직접 많이 사용해보지는 않았지만, 앞으로 React와 Next.js 프로젝트를 진행하면서 Tailwind를 직접 사용해보고 장단점을 더 체감해보고 싶다.
