📌 Tailwind CSS 진짜 편한가?

CSS 프레임워크 중 하나가 바로 Tailwind CSS이다.

처음 접했을 땐 생소 했지만 기존의 CSS 방식보다 훨씬 빠르게 스타일을 잡을 수 있다는 걸 체감했다.

Tailwind CSS가 무엇인지, 어떻게 설치하고 사용하는지, 장단점까지 정리해보려 한다.

1️⃣ Tailwind CSS란?

Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크이다.

기존의 CSS처럼 클래스를 따로 정의하는 방식이 아니라 HTML 혹은 JSX에 바로 유틸리티 클래스들을 작성하여 스타일링하는 방식이다.
이러한 방식 덕분에 빠르게 화면을 만들 수 있으며 디자인 시스템을 일관되게 유지할 수 있다는 특징이 있음.

 

2️⃣ 설치 방법 (Vite + React 기준)

Tailwind CSS는 프레임워크와 환경에 맞게 설정이 필요하다.

아래는 Vite 환경에서 React 프로젝트에 Tailwind CSS를 설치하는 방법이다.

📦 설치 명령어

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

 

위 명령어를 실행하면 tailwind.config.js와 postcss.config.js가 생성됨.

📁 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

content 경로 설정은 Tailwind가 클래스명을 추출할 파일들을 지정하는 부분이다.

📁 CSS 파일 구성

index.css 파일에서 아래와 같이 작성해야 Tailwind의 유틸리티 클래스들이 정상 작동함.

@tailwind base;
@tailwind components;
@tailwind utilities;

📁 index.js 혹은 main.jsx에 CSS import

Tailwind가 적용된 CSS 파일을 main.jsx 파일에 import 해줘야 적용된다.

import './index.css';

 

자세한 설치방법은 Tailwind CSS 사이트에서 확인 할 수 있다.

https://v3.tailwindcss.com/docs/installation

3️⃣ Tailwind CSS 코드 작성 방법

다음은 Tailwind CSS를 이용하여 “안녕하세요”라는 문구를 화면 정중앙에 크게 띄우는 코드 예시이다.

import { useState } from 'react'
import './App.css'

function App() {
  return (
    <>
    <div className='flex justify-center items-center h-screen'>
      <div className='text-9xl text-[rgb(106,105,179)]'>안녕하세요</div>
    </div>
    </>
  )
}

export default App

 

Tailwind CSS는 클래스 이름을 조합하는 방식으로 스타일을 정의한다.
예시처럼 별도로 CSS 파일을 만들지 않고도, HTML이나 JSX에 클래스만 넣어주는 식이다.

✅ 사용된 클래스 설명

클래스 명	설명
flex	Flexbox 레이아웃 사용
justify-center	가로 중앙 정렬
items-center	세로 중앙 정렬
h-screen	전체 화면 높이 설정
text-9xl	매우 큰 텍스트 크기
text-[rgb(106,105,179)]	커스텀 색상

이처럼 기능별로 나뉜 클래스를 조합하면 빠르게 원하는 스타일을 구성할 수 있다.
Tailwind의 공식 문서(https://tailwindcss.com/docs)에는 클래스 이름과 옵션이 잘 정리되어 있어 검색하여 쓰는게 좋다.

🎨 커스텀 스타일 사용하기 (임의 값 지정)

Tailwind CSS는 기본적으로 text-blue-500, bg-red-300처럼 미리 정의된 디자인 시스템을 사용하지만, 꼭 정해진 색상만 써야 하는 건 아니다. 직접 원하는 색상이나 크기 값을 [] 안에 작성하여 자유롭게 커스텀할 수 있음.

<div class="mt-[13px] w-[120px] h-[80px]text-[rgb(106,105,179)]">임의 크기</div>

 

클래스 명	설명
mt-[13px]	위 여백을 13px로 지정
w-[120px]	너비 120px
h-[80px]	높이 80px
text-[rgb(106,105,179)]	RGB 형식으로 직접 텍스트 색상 지정

 

이처럼 [] 안에 원하는 값을 넣으면 Tailwind의 디자인 시스템을 따르지 않아도 자유롭게 스타일을 설정할 수 있다.
단, 이런 커스텀 값은 프로젝트 전체 디자인 일관성을 해칠 수 있으니 꼭 필요한 경우에만 사용하는 것이 좋다.

📊 Tailwind CSS의 장단점

✅ 장점

• CSS를 직접 작성하지 않아도 됨
  → 클래스명만 조합해서 스타일을 만들 수 있음.
• 개발 속도가 빠름
  → 반복되는 스타일 정의 없이 빠르게 화면 구현 가능.
• 체계적이고 일관된 디자인 사용 가능
  → 디자인 시스템이 내장되어 있어 색상, 간격, 폰트 등을 일관되게 유지할 수 있음.

❌ 단점

• 초기 설정이 다소 복잡함
  → 환경 설정에 익숙하지 않다면 진입 장벽이 느껴질 수 있음.
• HTML/JSX가 지저분해질 수 있음
  → 클래스가 길어지면 코드 가독성이 떨어질 수 있음.
• 최적화하지 않으면 CSS 파일 크기가 커질 수 있음
  → 불필요한 클래스까지 번들링될 수 있어 content 설정이 중요함.