Tailwind CSS

CSS 프레임워크는 수많은 종류가 있지만, Tailwind CSS는 최근 웹 개발에서 매우 인기가 있습니다. 이번 프로젝트에서는 Tailwind CSS를 사용해보고 싶어서 공부할 겸 주제로 잡았습니다. Tailwind CSS의 개념, 설치 방법(CDN, npm), 장단점, 기초/심화 사용법, 그리고 커스터마이징까지 공부해 보도록 하겠습니다.

1. Tailwind CSS란?

Tailwind CSS는 Utility-first CSS 프레임워크입니다.

기존 CSS: 클래스 하나에 여러 속성을 묶어 스타일 정의 (.btn { padding: 10px; background: blue; })
Tailwind CSS: 하나의 클래스는 하나의 기능만 수행 (p-2 = padding, bg-blue-500 = 배경색)

즉, HTML에서 직접 작은 단위 유틸리티 클래스를 조합해 UI를 구성합니다.

장점

반복적인 CSS 작성 최소화
반응형/모바일 퍼스트 디자인 간편
클래스 조합만으로 빠른 프로토타입 가능

단점

HTML의 코드들이 길어져 가독성이 나빠질 수 있음
초반에 유틸리티 개념 익히는 학습 곡선 있음

2. Tailwind CSS 설치

2-1. CDN 방식 (빠른 테스트용)

HTML <head>에 링크 한 줄 추가:

<link href="https://cdn.tailwindcss.com" rel="stylesheet" />

장점: 설치 필요 없음, 빠른 테스트 가능
단점: 커스터마이징에 한계가 있음, 프로덕션 용도로는 비추천

2-2. npm 설치 (프로젝트용, 추천)

프로젝트 초기화

npm init -y

Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer

Tailwind 초기화

npx tailwindcss init -p

생성된 tailwind.config.js에서 커스터마이징 가능
빌드 과정 필요 (npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch)

3. Tailwind CSS 기초 사용법

Tailwind는 유틸리티 클래스를 HTML에 직접 작성합니다.

3-1. 레이아웃

<div class="flex justify-center items-center h-screen">
  <p class="text-xl font-bold text-blue-500">Hello Tailwind!</p>
</div>

flex: Flexbox 적용
justify-center, items-center: 중앙 정렬
h-screen: 화면 높이만큼

3-2. 색상과 타이포그래피

<p class="text-red-500 text-lg font-semibold">
  Tailwind는 클래스 조합만으로 스타일링 가능
</p>

text-red-500: 빨강 색상
text-lg: 글자 크기
font-semibold: 글자 굵기

3-3. 반응형 디자인

<div class="bg-blue-500 md:bg-green-500 lg:bg-red-500 p-4">반응형 배경색</div>

md: 이상 화면에서 배경 초록, lg: 이상에서 배경 빨강
모바일 퍼스트 접근

4. Tailwind CSS 심화 사용법

4-1. 상태별 스타일링

<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
  Hover me
</button>

hover:bg-blue-700: 마우스를 올렸을 시 배경색 변경
focus:ring-2: 포커스 시 강조

4-2. 커스텀 폰트/색상 적용

tailwind.config.js 수정:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#1da1f2",
      },
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
      },
    },
  },
};

HTML에서 사용:

<p class="text-brand font-sans">Custom color & font</p>

4-3. 플러그인 활용

예: @tailwindcss/forms, @tailwindcss/typography
설치 후 tailwind.config.js에 추가 가능

plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")];

5. Tailwind CSS 커스터마이징

colors: 기본 색상 외 프로젝트 맞춤 색상 추가
spacing: padding, margin 단위 확장
screens: 반응형 브레이크포인트 정의
plugins: 반복되는 스타일 기능화
variants: hover, focus, active 등 상태 조합 확장

예시: spacing 확장

module.exports = {
  theme: {
    extend: {
      spacing: {
        72: "18rem",
        84: "21rem",
        96: "24rem",
      },
    },
  },
};

class="w-72 h-96"처럼 사용 가능

6. Oneul Code를 정리하며…

오늘 Tailwind CSS에 대해 학습하고 직접 HTML에 적용해보며

유틸리티 퍼스트: 작은 단위 클래스 조합으로 UI 구성
CDN vs npm 설치: 빠른 테스트 vs 프로젝트용 커스터마이징
기초/심화 활용: 레이아웃, 색상, 타이포그래피, 상태별 스타일링
커스터마이징: tailwind.config.js파일을 통해 색상, 폰트, spacing, 반응형, 플러그인 확장 가능

위 사항들을 알게 되었습니다.

Tailwind CSS는 단순히 빠른 스타일링을 넘어, 반응형 UI와 유지보수 용이성까지 고려한 현대적 CSS 프레임워크임을 알 수 있었습니다.

HTML에 클래스 조합만으로도 충분히 디자인을 구현할 수 있으며, 필요하면 config를 통해 자체 디자인 시스템까지 구축할 수 있습니다.

Oneul Code는 오늘 학습한 내용을 기록하면서, 이 글을 읽는 여러분도 바로 활용할 수 있기를 바랍니다.

Oneul Code - 05. About Tailwind CSS