| <colbgcolor=#06B6D4><colcolor=#fff> Tailwind CSS | |
| | |
| 종류 | 프론트엔드 프레임워크 |
| 개발 | Tailwind Labs |
| 버전 | v3.3.2 |
| 출시 | 2017년 11월 1일[1] |
| 링크 | |
[clearfix]
1. 개요
Adam Wathan이 고안하고, Tailwind Labs에서 개발하고 있는 CSS 프레임워크다. 유틸리티 우선 CSS 프레임워크라고 소개하고 있다.CSS를 작성하지 않고 클래스명을 제공하여 HTML에 필요한 CSS 유틸리티만 입혀도 스타일이 완성되는 특징을 가져 프론트엔드와 디자이너들에게 새로운 웹 개발 물결을 일으켰다.
Tailwind CSS에 인기에 비즈니스에서 컴포넌트 단위로 생산성을 높일 수 있는 Tailwind UI 컴포넌트 상품을 판매하고 있다. 또는, Daisy UI처럼 Tailwind CSS 플러그인 기반의 오픈소스 CSS 프레임워크나, Flowbite 처럼 스크립트와 통합하여 범용적인 Tailwind CSS 기반의 UI 프레임워크를 무료 혹은 유료 확장으로 사용 가능하다.
2. 장점
3버전부터는 설치만 하고도 바로 사용 가능한 Zero-config 방식이기 때문에, 편리하게 시작할 수 있다. CSS를 작성하지 않고 인터페이스를 구축할 수 있게 해준다. 기존에는 CSS 파일로 가서 다음처럼 코드를 작성했어야 했다.#!syntax css
.text {
font-size: 1.125rem;
line-height: 1.75rem;
}
Tailwind CSS에서는 HTML class 속성에
text-lg만을 넣어주는 것으로 간단하게 스타일을 적용할 수 있다. 예를 들자면- 순수 css에서 작성할때, 배경 그래디언트를 넣을때는 예시로 이정도 용량의 코드를 넣어야 했다.#!syntax html
<style>
div {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.jbGrad01 {
background: linear-gradient( to right, yellow, red, purple, blue );
}
</style>
<body>
<div class="jbGrad01">to yellow, red</div>
</body>
로 해야 했던것을
#!syntax html
<body>
<div class="bg-gradient-to-r from-yellow-400 to-red-400"></div>
</body>
이렇게 할 수 있다. div나 다른 태그의 class 부분에 tailwindcss 구문을 넣으면 된다.
v3 부터는 HTML의
class 속성 뿐 만 아니라 지정한 소스 파일 유형(HTML, JS, JSX 등)에서 Tailwind가 정의한 유틸리티 클래스명에 만족하는 모든 문자열을 분석하여 사용하는 클래스만 남기고 모두 삭제하는 방식으로 개선하였다. 따라서 별다른 설정 없이 HTML 뿐 만 아니라 React의 JSX 나 JS 스크립트에 유틸리티 클래스명 작성이 매우 편리해졌다. 이로 인해 React 에서의 Tailwind CSS 사용 사례가 늘어나고 있다.3. 단점
3.1. 공통
이는 CSS 유틸리티 패러다임의 단점이기도 한데, 필요한 속성이 많아질수록 가독성은 반비례로 나빠진다.#!syntax html
<div class="w-16 h-16 rounded text-white bg-black py-1 px-2 m-1 text-sm md:w-32 md:h-32 md:rounded-md md:text-base lg:w-48 lg:h-48 lg:rounded-lg lg:text-lg">
헐.
</div>
tailwindcss 의 경우 이를 보완할 몇 가지 옵션을 제공하는데, 간단하게는 CSS 별도로
@apply 구문을 사용하여 해결하거나, 좀 더 고급으로 들어가 tailwind 플러그인 등을 작성해서 속성을 많이, 자주 사용하는 것들을 정리하여 구조화한 방법 등이 있다.3.2. v2.x 이하
최적화 도구가 없으면 CSS 사이즈가 너무 크다. 유틸리티 우선 CSS의 특성상, 스타일을 사전 지정한 속성들이 모두 담겨있기 때문에 파일 크기가 큰 편이다. v2 기준 minify를 한 CDN 버전이 2.8MB에 육박할 정도. Brotli 압축을 해도 최소한 70kb는 나간다. Tailwind 측에서도 이러한 문제점을 해결하기 위해 빌드 프로세스에서 필요한 스타일만 남기는 기능인 purge의 사용을 권장하고, CDN 사용을 지양, PostCSS 플러그인으로 사용하는 것을 권장하고 있다. 여기서 minify까지 돌리면 10~20kb까지 줄일 수 있다.3.3. v3.x 이상
v3 부터 IE 지원을 제거했다.v3 기준부터는 자체 Purge 기능을 내장하고 똑똑하게 클래스명을 관리하기 시작하면서 v2 까지의 단점이 사라졌다. 대신, 가장 중요한 주의사항으로, 바로 클래스명을 정적 문자열로 표현해야 한다는 것이다. 동적 문자열로 표현할 경우 TailwindCSS 가 어떤 클래스를 남겨야 할지 애매해지기 때문.
#!syntax javascript
// 아래처럼 완전히 정의한 유틸리티 클래스명을 명시해야 허용
const classes1 = 'bg-gradient-to-r from-yellow-400 to-red-400' // 허용
const classes2 = 'bg-gradient-to-r' + ' from-yellow-400' + ' to-red-400' // 허용
const classes3 = ['bg-gradient-to-r', 'from-yellow-400', 'to-red-400'].join(' ') // 허용
// 아래와 같이 동적 문자열로 부여할 경우 TailwindCSS가 인식하지 못하여 적용되지 않음.
let brightness = '400'
const classes4 = 'bg-yellow-' + brightness // 불허, bg-yellow-400 이 확실한지 엔진이 인식 불가.
자세한 내용은 공식 문서 참고. 물론 config에서 항상 남길 수 있도록 대응이 가능하다.
4. Tailwind CSS를 사용하는 웹 사이트/앱 목록
5. 유사 프로젝트
- UnoCSS: Vue 팀원이 만든 스크립트 중심의 CSS 유틸리티 프레임워크. 본 Tailwind CSS의 유틸리티 우선 철학과 여러 장단점을 따라가지만, 기본적으로 정해져 있는 TailwindCSS와 달리 확장성을 중심으로 높은 자유도를 자랑하여 Vue 메인 개발자인 Evan You의 후원을 받으며 Vue 개발진들이 적극적으로 참여하고 있는 프로젝트. 당연히 기본 템플릿을 제공하기 때문에 TailwindCSS 와 유사한 템플릿으로로 CSS 유틸리티 클래스를 사용할 수 있으며, 확장을 통해 클래스명 프로세싱을 지원하여 간결한 그룹핑 등의 강력한 기능을 제공한다.
WindiCSS: Tailwind 대안으로 만든 유틸리티 중심의 CSS 프레임워크, Tailwind CSS의 유틸리티 중심과 함께 간결한 그룹핑 등의 경쟁 기능으로 떠올랐으나, 더 강력한 UnoCSS 프레임워크가 나타나면서, 개발진들이 UnoCSS 에 합류하고 해당 프로젝트는 종료를 선언하였다.
[1] v0.1 릴리즈 기준일, GitHub Tag 링크