오늘 배운 것 (TIL): Tailwind CSS
Tailwind CSS란?
Tailwind CSS는 매우 커스터마이즈 가능한(low-level) CSS 프레임워크로, 여러분이 원하는 디자인을 만들 수 있는 모든 빌딩 블록을 제공합니다. Bootstrap이나 Foundation 같은 전통적인 CSS 프레임워크와는 달리, Tailwind는 사전에 디자인된 컴포넌트를 제공하는 대신 유틸리티 클래스를 제공하여 HTML에서 직접 디자인을 구축할 수 있게 합니다.
주요 특징
- 유틸리티-우선: Tailwind는 개별 스타일 속성을 캡슐화한 유틸리티 클래스를 중심으로 설계되어 HTML에서 직접 스타일을 구성할 수 있습니다.
- 높은 커스터마이즈 가능성: Tailwind의 설정 파일을 통해 색상, 간격, 폰트 등 디자인 시스템의 거의 모든 측면을 커스터마이즈할 수 있습니다.
- 반응형 디자인: 모바일 우선 접근 방식을 사용한 반응형 디자인 기능이 내장되어 있습니다. 화면 크기에 따라 조건부로 스타일을 쉽게 적용할 수 있습니다.
- PurgeCSS: Tailwind는 PurgeCSS와 통합되어 사용하지 않는 CSS를 제거하여 최종 빌드를 더 작고 효율적으로 만듭니다.
- 컴포넌트 친화적: 유틸리티-우선 접근 방식에도 불구하고 React, Vue, Angular 같은 컴포넌트 기반 라이브러리 및 프레임워크와 잘 작동합니다.
- 다크 모드: 다크 모드 테마에 대한 기본 지원을 제공합니다.
핵심 개념
-
유틸리티 클래스: Tailwind는 유틸리티 클래스를 사용하여 특정 스타일을 HTML에 직접 적용합니다. 예를 들어
bg-blue-500은 배경 색상을 파란색으로 설정하고,text-white는 텍스트 색상을 흰색으로 설정합니다.<div class="bg-blue-500 text-white p-4 rounded"> Hello, Tailwind! </div> -
반응형 디자인: Tailwind의 반응형 유틸리티를 사용하면 화면 크기에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어
md:bg-green-500은 중간 크기 화면 이상에서 녹색 배경을 적용합니다.<div class="bg-blue-500 md:bg-green-500 text-white p-4 rounded"> Responsive Tailwind! </div> -
의사 클래스 변형: 요소의 상태에 따라 스타일을 적용할 수 있습니다. 예를 들어
hover,focus,active등의 상태를 처리할 수 있습니다.<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Hover me! </button> -
커스터마이제이션: Tailwind는 설정 파일(
tailwind.config.js)을 통해 기본 테마를 커스터마이즈하거나 확장하거나 완전히 재정의할 수 있습니다.// tailwind.config.js module.exports = { theme: { extend: { colors: { primary: '#ff6363', secondary: '#3b3b3b', }, }, }, } -
PurgeCSS: PurgeCSS와의 통합을 통해 Tailwind는 프로덕션 빌드에서 사용하지 않는 CSS 클래스를 제거하여 최종 CSS 번들을 최소화합니다.
// tailwind.config.js module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], // 기타 설정... }
사용 예제
다음은 Tailwind CSS를 사용하여 만든 반응형 카드 컴포넌트의 간단한 예제입니다:
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="img/card-image.jpg" alt="A card image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case Study</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>
</div>장단점
장점:
- 빠른 개발: 사전 정의된 유틸리티 클래스를 사용하여 개발 속도가 빨라집니다.
- 커스터마이즈 가능: 어떤 디자인 요구사항에도 맞출 수 있도록 높은 커스터마이즈 가능성 제공.
- 반응형: 내장된 반응형 유틸리티로 반응형 디자인을 쉽게 구현.
- 작은 번들 크기: PurgeCSS를 사용하면 최종 CSS 파일 크기가 최소화됨.
단점:
- 가독성: HTML이 수많은 유틸리티 클래스로 인해 복잡해질 수 있음.
- 학습 곡선: 전통적인 CSS 방식을 사용하는 사람들에게는 새로운 접근 방식을 익히는 데 시간이 걸릴 수 있음.
- 장황한 마크업: 매우 복잡한 스타일의 경우 마크업이 장황하고 관리하기 어려울 수 있음.
결론
Tailwind CSS는 CSS 워크플로우를 간소화하고 많은 사용자 정의 CSS를 작성하지 않고도 사용자 지정 디자인을 만들고자 하는 개발자에게 강력한 도구입니다. 유틸리티-우선 접근 방식과 광범위한 커스터마이즈 옵션은 현대 웹 개발에 유연한 선택을 제공합니다. 그러나 전통적인 CSS 프레임워크에 익숙한 사람들에게는 적응 기간이 필요할 수 있습니다.
