Tailwind CSS는 유틸리티 퍼스트(Utility-first) CSS 프레임워크로, 클래스 기반의 CSS를 사용하여 빠르고 효율적으로 스타일링을 할 수 있게 해줍니다. Tailwind CSS의 주요 특징과 사용법을 알아보겠습니다.
주요 특징
유틸리티 퍼스트
Tailwind CSS는 미리 정의된 유틸리티 클래스들을 제공하여 CSS 작성을 최소화하고, 필요한 스타일을 직접 HTML 클래스에 추가할 수 있습니다. 예를 들어, bg-blue-500와 같은 클래스를 사용하여 배경색을 설정할 수 있습니다.
커스터마이징 가능
tailwind.config.js 파일을 통해 테마, 색상, 폰트 등을 커스터마이징 할 수 있습니다. 이는 프로젝트의 디자인 요구 사항에 맞게 Tailwind CSS를 쉽게 조정할 수 있게 합니다.
https://tailwindcss.com/docs/configuration
반응형 디자인
Tailwind CSS는 반응형 디자인을 쉽게 구현할 수 있도록 도와줍니다. 반응형 유틸리티 클래스들을 사용하여 다양한 화면 크기에 맞춘 스타일링이 가능합니다. 예를 들어, md:bg-red-500는 중간 크기 이상의 화면에서만 배경색을 빨간색으로 설정합니다.
https://tailwindcss.com/docs/screens
제작 효율성
클래스명을 직관적으로 지정하여 코드의 가독성을 높이고, CSS 파일을 작성하는 시간을 줄여줍니다. 이는 개발 속도를 크게 향상시킵니다.
Purging
Tailwind CSS는 실제로 사용되는 클래스들만 남기고 나머지 CSS를 제거하여 파일 크기를 줄이는 기능을 제공하여 최적화된 빌드를 생성합니다.
사용법
1. 설치
Tailwind CSS를 프로젝트에 추가하는 방법은 여러 가지가 있습니다. 여기서는 npm을 사용한 설치 방법을 설명합니다.
npm install -D tailwindcss
npx tailwindcss init2.프로젝트 설정
tailwind.config.js 파일이 생성됩니다. 여기에서 Tailwind CSS의 설정을 커스터마이징 할 수 있습니다.
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [],
}3.CSS 파일 생성
프로젝트의 CSS 파일에 Tailwind CSS의 지시문을 추가합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;4. HTML에서 클래스 사용
이제 HTML 파일에서 Tailwind CSS의 유틸리티 클래스를 사용하여 스타일링을 할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="path/to/your/tailwind.css" rel="stylesheet">
<title>Document</title>
</head>
<body class="bg-gray-100 p-4">
<div class="max-w-md 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="image.jpg" alt="A beautiful scenery">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Title</div>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</body>
</html>5. 빌드
개발 과정에서 변경된 내용을 반영하여 Tailwind CSS를 빌드합니다.
npx tailwindcss build src/tailwind.css -o dist/tailwind.cssTailwind CSS를 사용하면 빠르고 효율적으로 스타일링을 할 수 있으며, 특히 반응형 디자인 구현과 프로젝트 맞춤 설정에 강력한 장점을 제공합니다.
적응하는 동안 Docs를 계속 켜두고 검색하여 사용하였지만, 사용하지 않았던 적이 기억이 나지 않을 정도로 매우 편리합니다. 디자인이 들어간 프로젝트를 진행할때는 프로젝트에 적용되는 디자인 가이드를 미리 커스터마이징으로 설정하고 사용하면 매우 편리합니다.
