테일윈드 CSS

테일윈드 CSS(Tailwind CSS)는 오픈 소스 CSS 프레임워크이다. 부트스트랩과 같은 다른 프레임워크와 달리, 버튼이나 표와 같은 HTML 요소를 위해 미리 정의된 일련의 클래스를 제공하지 않는다. 대신, 각 요소를 조합하고 일치시켜 스타일을 지정할 수 있는 "유틸리티" CSS 클래스 목록을 생성한다.

예를 들어, 다른 전통적인 시스템에서는 노란색 배경색과 굵은 텍스트를 적용하는 이라는 클래스가 있을 수 있다. 테일윈드에서 이 결과를 얻으려면 라이브러리에서 생성된 클래스 집합인 과 를 적용해야 한다.

2025년 10월 20일 기준, 테일윈드 CSS는 깃허브에서 90,700개 이상의 스타(stars)를 보유하고 있다.

 특징 
 유틸리티 클래스 
유틸리티 퍼스트(utility-first) 개념은 테일윈드의 주요 차별화된 특징을 의미한다. 컴포넌트(버튼, 패널, 메뉴, 텍스트 상자 등)를 중심으로 클래스를 만드는 대신, 특정 스타일 요소(노란색, 굵은 글꼴, 매우 큰 텍스트, 중앙 정렬 등)를 중심으로 클래스를 구축한다. 이러한 각 클래스를 유틸리티 클래스라고 부른다.

테일윈드 CSS에는 색상, 테두리, 표시 유형(display), 글꼴, 글꼴 크기, 레이아웃 및 그림자와 같은 수많은 CSS 속성을 제어할 수 있는 많은 유틸리티 클래스가 있다.

+예시: 노란색 공지사항결과500x500px|Example Tailwind yellow warning.png코드<div class="m-4 p-4 bg-yellow-200 font-bold rounded-lg">
  <p>Please be careful when feeding the birds.</p>
</div>클래스Tailwind동일한 CSSmargin: 1rem;padding: 1rem;background-color: rgb(254 240 138);font-weight: 700;border-radius: 0.5rem;

 변형 (Variants) 

테일윈드는 미디어 쿼리를 통해 특정 상황에서만 유틸리티 클래스를 적용할 수 있는 기능을 제공하며, 이를 변형(variant)이라고 한다. 변형의 주요 용도는 다양한 화면 크기에 맞는 반응형 인터페이스를 설계하는 것이다. 또한 마우스를 올렸을 때의 , 키보드로 선택되었을 때의 , 사용 중일 때의 와 같은 요소의 다양한 상태에 대한 변형이나, 브라우저 또는 운영 체제에서 다크 모드가 활성화된 경우를 위한 변형도 존재한다.

변형은 두 부분으로 구성된다. 충족해야 할 조건과 조건이 충족될 때 적용되는 클래스이다. 예를 들어, 변형 은 화면 크기가 에 정의된 값 이상일 때  클래스를 적용한다.

테일윈드 CSS는 자바스크립트를 사용하여 개발되었으며, Node.js를 통해 실행되고, npm 또는 yarn과 같은 환경 패키지 관리자로 설치한다.

 설정 및 테마 

보통 라고 이름 붙여진 설정 파일을 통해 테일윈드가 제공하는 유틸리티 클래스와 변형을 구성할 수 있다. 설정에서 색상 팔레트나 여백을 위한 요소 간 크기와 같은 유틸리티 클래스의 값을 지정할 수 있다.

 전체 빌드 및 제거 (Purge) 

테일윈드의 기본 모드는 시스템이 프로젝트 설정에 따라 가능한 모든 CSS 조합을 생성하는 것이다. 그런 다음 PurgeCSS와 같은 다른 유틸리티를 사용하여 모든 파일을 훑어보고, 사용되지 않는 클래스를 결과 CSS 파일에서 제거한다.

변형의 수와 그 조합에 따라 생성될 수 있는 클래스의 양이 방대하기 때문에, 이 방식은 대기 시간이 길어지고 제거 전 CSS 파일의 크기가 커지는 단점이 있다. 이러한 작동 방식은 테일윈드 CSS 버전 3부터는 더 이상 사용되지 않는다.

 JIT 모드 (Just-In-Time) 

JIT 모드(Just-In-Time)는 가능한 모든 클래스를 생성한 후 사용되지 않는 모든 클래스를 제거하는 방식(Tree shaking 기법) 대신, HTML, JSX, VUE 파일(또는 구성된 확장자나 위치)의 내용을 분석하여 필요하고 사용되는 클래스만 즉석에서 생성하는 대체 방식이다.

필요한 CSS만 생성함으로써 JIT는 CSS 파일의 크기를 줄인다. 이러한 기술적 개선을 통해 수많은 새로운 변형과 유틸리티 클래스를 도입할 수 있게 되었을 뿐만 아니라, 설정에 지정되지 않은 임의의 값을 대괄호 표기법(예: , )을 사용하여 즉석에서 유틸리티 클래스를 만들 수 있게 되었다.

테일윈드 CSS 버전 3부터 JIT 모드가 기본값이 되었다.

 버전 
테일윈드 CSS는 버전 호환성을 식별하기 위해 유의적 버전을 사용한다.

 같이 보기 
 jQuery Mobile
 자바스크립트 프레임워크
 자바스크립트 라이브러리

 각주 

 외부 링크 
 공식 테일윈드 문서
 테일윈드 플레이
 깃허브 저장소
 테일윈드 변환기

분류:CSS
분류:MIT 라이선스 소프트웨어
분류:반응형 웹 디자인
분류:CSS 프레임워크