Tailwind CSS는 작은 스타일 역할을 가진 유틸리티 클래스를 조합해 화면을 만드는 CSS 프레임워크다. 예를 들어 여백·글자 크기·배치·색상을 HTML이나 컴포넌트의 클래스에 표현한다. 완성된 디자인을 자동 제공하는 UI 컴포넌트 묶음과는 역할이 다르다.
스타일을 조합하는 방식
소스에서 사용한 클래스 이름을 찾아 해당 CSS를 만드는 빌드 방식이 핵심이다. 같은 규칙을 여러 요소가 공유할 수 있고 반응형 구간이나 상태에 따른 변형도 클래스 조합으로 표현한다. 스타일과 마크업을 함께 읽을 수 있어 작은 컴포넌트 변경의 범위를 파악하기 쉬운 편이다.
장점은 간격·색상 같은 디자인 규칙을 재사용하고 별도 CSS 이름을 매번 고민하는 비용을 줄이는 것이다. 반대로 클래스가 길어질 수 있으며 여러 화면에서 같은 묶음을 복사하면 변경이 흩어진다. 반복되는 덩어리는 컴포넌트로 묶고, 의미와 상태가 같은지 확인해야 한다. 클래스 수가 적다는 이유만으로 접근성이 확보되는 것도 아니다.
도서 예약 카드 예제
Tailwind CSS 4가 이미 빌드에 연결된 프로젝트에서 다음 마크업을 사용한다. 예약 가능 여부를 보여 주는 정적인 가상 카드이며 실제 예약 저장은 하지 않는다. 기본 테마의 색상과 간격 유틸리티를 사용하는 예제다.
<article class="max-w-md border border-slate-300 rounded-lg p-6">
<h2 class="text-xl font-semibold text-slate-900">작은 정원의 기록</h2>
<p class="mt-2 text-slate-600">대출 가능한 책이 2권 있습니다.</p>
<button type="button"
class="mt-4 rounded bg-teal-700 px-4 py-2 text-white disabled:opacity-50">
예약하기
</button>
</article>카드는 최대 너비를 가지며 제목·설명·버튼 사이에 일관된 여백이 생긴다. disabled 속성을 실제로 추가하면 버튼의 기본 조작이 제한되고 투명도도 바뀐다. 색만 회색으로 바꾸는 것과 비활성 상태를 설정하는 것은 다르다. 화면이 좁거나 글자가 길어졌을 때도 제목과 버튼이 잘리는지 확인한다.
동적으로 만든 클래스의 함정
빌드는 프로그램을 실행해 모든 문자열 결과를 추론하지 않는다. 예를 들어 색 이름을 조합해 bg-${color}-700처럼 만들면 완성된 클래스가 소스에 없어 CSS가 생성되지 않을 수 있다. 상태별로 bg-teal-700, bg-slate-500 같은 완전한 문자열을 사전에 매핑하거나 현재 버전의 소스 등록 기능을 사용한다.
원하는 색이 나오지 않으면 우선 소스 탐지 범위와 생성된 CSS를 확인한다. 무조건 중요한 선언을 추가하면 우선순위 문제를 숨기기 쉽다. 프로젝트가 커지면 디자인 토큰과 컴포넌트 규칙을 먼저 정하고 유틸리티를 그 규칙의 표현 수단으로 사용한다. Tailwind의 설치·설정 문법은 주 버전에 따라 달라지므로 오래된 설정 예제를 섞지 않는다.