Tailwind CSS에 대해 알아보도록 하겠습니다. 기존에는 styled-components 라이브러리로 스타일 구성을 작성했지만, 이번에는 Tailwind CSS가 무엇이고, 왜 사용하는지, 사용방법을 알아보는 과정을 설명드리겠습니다.
목차
1. Tailwind CSS
1-1. Tailwind CSS란?
1-2. Utility-first 접근 방식이란?
1-3. Tailwind CSS를 왜 사용할까?
1-4. Tailwind CSS의 장단점
1-5. Tailwind CSS 설치 방법
1-6. 기본 문법과 사용 방법
1-7. 반응형 디자인과 Variants
서론
현대 웹 개발에서 디자인과 스타일링은 빠른 제작 속도와 일관성을 동시에 요구합니다. 하지만 기존의 CSS나 CSS 프레임워크는 커스터마이징의 한계, 불필요한 코드 증가, 유지보수의 복잡함 등 여러 문제를 안고 있었습니다. 이러한 문제를 해결하기 위해 등장한 것이 Tailwind CSS입니다. Tailwind CSS는 Utility-first 접근 방식을 채택하여, 필요한 스타일을 클래스 형태로 바로 적용할 수 있도록 도와줍니다. 덕분에 별도의 CSS 파일을 작성하지 않고도 빠르고 직관적으로 UI를 구축할 수 있으며, 반응형 디자인과 다양한 상태 변형도 손쉽게 구현할 수 있습니다. 이 시리즈에서는 Tailwind CSS의 개념부터 설치, 기본 사용법, 실전 예제까지 차근차근 살펴보며, 누구나 Tailwind CSS 프레임워크를 쉽게 사용할 수 있도록 설명해보도록 하겠습니다.
본론
1. Tailwind CSS
참고 자료 : https://tailwindcss.com/docs/installation/using-vite
Installing with Vite - Installation
Integrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.
tailwindcss.com
1-1. Tailwind CSS란?
Utility-first CSS 프레임워크로, 미리 정의된 짧은 클래스 이름을 조합하여 HTML 요소의 스타일을 지정하는 방식
1-2. Utility-first 접근 방식이란?
Tailwind CSS는 Utility-first 접근 방식을 사용한 CSS 프레임워크라는 의미에서 Utility-first 접근 방식이란, 미리 정의된 유틸리티 클래스를 활용하여 HTML 코드 내에서 직접 스타일을 적용하는 것을 의미합니다. 즉 CSS 파일에 별도로 스타일 규칙을 작성하지 않고, HTML 태그에 클래스 이름을 나열하여 스타일을 구성합니다.
1-3. Tailwind CSS를 왜 사용할까?
그럼 왜 Tailwind CSS를 사용할까요?
웹 개발을 하다 보면 "스타일을 빠르게 구성하고 싶지만, CSS를 일일이 작성하여 레이아웃을 구성하는게 되게 귀찮다" 라는 생각을 한 번쯤은 하실 수 있습니다. 특히 프로젝트의 규모에 따라 CSS 파일이 복잡해지고 유지보수가 어려워지는 문제를 겪게되는거죠.
Tailwind CSS가 이런 문제점들을 해결해준다고 보시면 됩니다.
1-4. Tailwind CSS의 장단점
장점
- 빠른 개발 속도
HTML 태그에 바로 스타일 클래스를 적용하므로, CSS 파일을 별도로 작성하지 않아도 됩니다. - 일관성 있는 디자인
미리 정의된 색상, 간격, 폰트 크기를 사용해 디자인 가이드가 자동으로 적용됩니다. - 반응형과 상태 스타일 내장
sm:, md:, hover:, focus:, dark: 같은 변형 클래스로 다양한 상태를 간단히 구현할 수 있습니다. - 불필요한 CSS 최소화
빌드 과정에서 사용하지 않는 클래스는 자동으로 제거되어 파일 크기를 줄일 수 있습니다. - 강력한 커스터마이징
tailwind.config.js에서 색상, 폰트, 브레이크포인트 등을 자유롭게 수정·확장할 수 있습니다.
단점
- HTML 클래스가 길어짐
여러 유틸리티 클래스를 조합하다 보면 HTML 태그가 길어지고 가독성이 떨어질 수 있습니다. - 초기 진입 장벽
클래스를 외워야 하므로 처음 접하는 사람에게는 다소 낯설게 느껴질 수 있습니다. - 추상화된 CSS 구조 부족
컴포넌트 단위로 스타일을 추상화하는 방식보다, 매번 클래스를 직접 입력해야 하므로
구조적인 스타일 관리에는 추가적인 패턴이 필요할 수 있습니다. - 디자인 의존성
Tailwind의 프리셋 디자인을 그대로 사용하면 프로젝트들이 비슷한 스타일을 띌 수 있습니다.
1-5. Tailwind CSS 설치 방법 (CDN 방식)
최근 Next.js는 create-next-app 실행 시 초기 설정 단계에서 Tailwind CSS를 기본 옵션으로 선택할 수 있습니다.
이 옵션을 선택하면 위의 설치 과정을 수동으로 할 필요 없이, Tailwind 설정이 자동으로 적용된 상태로 프로젝트가 생성됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Tailwind 테스트</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-blue-500">Hello Tailwind!</h1>
</body>
</html>
1-6. 기본 문법과 사용 방법
기본적으로 Tailwind CSS 클래스는 다음과 같은 구조를 가집니다
속성-값 (key-value)
예를 들면 background-red 이런식으로 가진다는거죠
key-value
주요 속성 분류
색상 (Colors)
글자 색상은 빨강으로 하고 500 단계
배경색은 연두색 200 단계
<p class="text-red-500">빨간색 텍스트</p>
<p class="bg-green-200">연두색 배경</p>
여백 (Spacing)
- m-{n}: margin
- p-{n}: padding
- mt-4: margin-top 1rem
- px-2: padding-left & padding-right 0.5rem
<div class="p-4 m-2 bg-gray-100">여백 적용</div>
글자 스타일 (Typography)
<h1 class="text-3xl font-bold">큰 제목</h1>
<p class="text-sm text-gray-600">작은 글자와 회색</p>
레이아웃 ( Layout )
- Flex, items-center, justify-content
- grid, grid-cols-3
<div class="flex items-center justify-between">
<span>왼쪽</span>
<span>오른쪽</span>
</div>
상태 접두어
- hover
- focus
- active
- px-2: padding-left & padding-right 0.5rem
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
버튼
</button>
1-7. 반응형 디자인과 Variants
Tailwind CSS는 클래스 앞에 접두어(prefix) 를 붙여 조건(반응형·상태·부모 상태 등)에 따라 스타일을 바꾸는 방식을 제공합니다.
대표적으로 sm:, md: 같은 반응형, hover:, focus: 같은 상태(상호작용), 그리고 dark:, group-hover:, peer-checked: 등이 있습니다.
- sm (≥ 640px)
- md (≥ 768px)
- lg (≥ 1024px)
- xl (≥ 1280px)
- 2xl (≥ 1536px)
이게 정확히 무슨 뜻이냐면 해당 너비에서 스타일이 적용된다는 것입니다.
<h1 class="text-lg md:text-2xl lg:text-4xl">반응형 제목</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- 카드들 -->
</div>
결론
Tailwind CSS는 Utility-first 방식으로 빠르고 일관된 UI 개발을 가능하게 합니다. 미리 정의된 클래스를 조합해 CSS 작성 없이도 스타일링이 가능합니다. 반응형 및 상태 스타일을 간단한 접두어로 처리할 수 있어 생산성이 높습니다. 단, 클래스가 길어지는 가독성 문제는 @apply나 컴포넌트화로 보완이 필요합니다.