본문으로 이동

테일윈드 CSS

위키백과, 우리 모두의 백과사전.
테일윈드 CSS
원저자애덤 와단, 조나단 레이닝크, 데이비드 헴필, 스티브 쇼거
개발자테일윈드 랩스(Tailwind Labs)[1]
발표일2019년 5월 13일(7년 전)(2019-05-13)[2]
안정화 버전
4.3.4[3] 위키데이터에서 편집하기 / 2026년 11월 2일
저장소
프로그래밍 언어타입스크립트, 러스트, CSS
플랫폼웹
언어영어
라이선스MIT 허가서[4]
웹사이트tailwindcss.com

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

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

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

특징

[편집]

유틸리티 클래스

[편집]

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

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

예시: 노란색 공지사항
결과 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 동일한 CSS
m-4 margin: 1rem;
p-4 padding: 1rem;
bg-yellow-200 background-color: rgb(254 240 138);
font-bold font-weight: 700;
rounded-lg border-radius: 0.5rem;

변형 (Variants)

[편집]

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

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

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

설정 및 테마

[편집]

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

전체 빌드 및 제거 (Purge)

[편집]

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

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

JIT 모드 (Just-In-Time)

[편집]

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

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

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

버전

[편집]

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

같이 보기

[편집]

각주

[편집]
  1. ↑ “Tailwind Labs”. 《GitHub》.
  2. ↑ Doe. “Release Notes: Tailwind CSS v1.0”. 《Tailwind CSS》. 2024년 8월 17일에 확인함.
  3. ↑ “Release 4.3.4”. 2026년 11월 2일. 2026년 11월 3일에 확인함.
  4. ↑ “Github: tailwindlabs/tailwindcss, LICENSE”. 《GitHub》.
  5. ↑ Gerchev, Ivaylo (2022). 《Tailwind CSS》. Sebastopol: O'Reilly Media. ISBN 978-1-0981-4099-1. OCLC 1314257318.
  6. ↑ Rappin, Noel (2021). 《Modern CSS with Tailwind flexible styling without the fuss》. Raleigh: The Pragmatic Bookshelf. ISBN 978-1-68050-857-4. OCLC 1277046918.
  7. ↑ 《tailwindlabs/tailwindcss》, Tailwind Labs, 2025년 9월 18일, 2025년 9월 18일에 확인함
  8. ↑ “Utility-First - Tailwind CSS” (영어). 《tailwindcss.com》. 2021년 11월 13일에 확인함.
  9. ↑ “Responsive Design - Tailwind CSS” (영어). 《tailwindcss.com》. 2021년 11월 13일에 확인함.
  10. ↑ “Hover, Focus, & Other States - Tailwind CSS” (영어). 《tailwindcss.com》. 2021년 11월 13일에 확인함.
  11. ↑ “Dark Mode - Tailwind CSS” (영어). 《tailwindcss.com》. 2021년 11월 13일에 확인함.
  12. ↑ “Installation - Tailwind CSS” (영어). 《tailwindcss.com》. 2021년 11월 13일에 확인함.
  13. 1 2 “Release v3.0.0-alpha.1 tailwindlabs/tailwindcss” (영어). 《GitHub》. 2021년 11월 13일에 확인함.

외부 링크

[편집]
원본 주소 "https://ko.wikipedia.org/w/index.php?title=테일윈드_CSS&oldid=42439485"