Tailwind CSS 최신버전 설치와 사용법 가이드 (Vite 프로젝트 기준)

Tailwind CSS 최신버전 설치와 사용법 가이드 (Vite 프로젝트 기준)

Tailwind 설치가 복잡하다고요?
Vite와 함께라면 깔끔하고 빠르게 세팅할 수 있어요.
최신버전까지 완벽하게 반영된 설치 가이드를 지금 만나보세요!

반응형

 

안녕하세요, 여러분 😊

요즘 많은 분들이 Vite + Tailwind CSS 조합을 많이 사용하시더라고요.

빠른 번들링 속도, 모던한 설정, 게다가 유연한 확장성까지!

그런데 막상 시작하려고 하면 설치 방법이 헷갈릴 수 있어요.

그래서 오늘은 Vite로 프로젝트를 생성한 후 Tailwind CSS 최신버전을 적용하는 가장 깔끔한 방법을 정리해 드릴게요.

개발 초보자분들도 따라만 하면 OK!

실전에서 바로 써먹을 수 있는 사용법까지 친절하게 알려드립니다 💪

목차

1. Vite 프로젝트 초기화 ⚙️ 2. Tailwind CSS 최신버전 설치 📦 3. Tailwind 설정 파일 구성 ✏️ 4. 글로벌 스타일 세팅 및 적용 🎨 5. 실전 사용 예제 🧪 6. 자주 발생하는 문제 해결법 🧯

 

1. Vite 프로젝트 초기화 ⚙️

Tailwind CSS를 제대로 활용하려면 먼저 Vite 프로젝트부터 잘 세팅하는 게 중요해요.

요즘엔 CRA보다 Vite를 더 많이 쓰는 추세잖아요.

속도 차이가 어마어마하니까요. 그럼, 터미널부터 열고 같이 따라가 봅시다!

🚀 Vite 프로젝트 생성 명령어

우선 Node.js가 설치되어 있어야 해요. Node가 없다면 Node.js 공식사이트에서 설치 먼저 해주세요.

Node.js — 어디서든 JavaScript를 실행하세요

 

npm create vite@latest tailwind-vite-app -- --template vanilla

• tailwind-vite-app은 프로젝트 이름이에요. 원하는 이름으로 바꿔도 됩니다.
• --template vanilla는 React 같은 프레임워크 없이 순수 HTML/JS 기반으로 구성된 템플릿이에요.

💡 명령 실행 후 폴더 이동 및 의존성 설치

cd tailwind-vite-app
npm install

여기까지 진행하면 Vite 프로젝트 뼈대가 완성됩니다.

구조는 심플해요.

index.html, main.js, 그리고 vite.config.js 파일이 핵심이죠.

📁 기본 디렉토리 구조

tailwind-vite-app/
├─ index.html
├─ main.js
├─ vite.config.js
├─ package.json
└─ node_modules/

이제 진짜 준비는 끝났어요.

다음 단계부터는 Tailwind CSS를 설치하고 설정하는 본격적인 작업이 들어갑니다!

 

 

2. Tailwind CSS 최신버전 설치 📦

자, 이제 본격적으로 Tailwind CSS를 설치할 차례입니다.

최신버전으로 설정하려면 몇 가지 패키지를 한 번에 설치해야 해요.

걱정 마세요. 명령어 하나면 끝입니다.

📦 설치 명령어

npm install -D tailwindcss postcss autoprefixer

• tailwindcss: 핵심 프레임워크입니다.
• postcss: Tailwind의 처리 과정을 도와주는 도구에요.
• autoprefixer: 브라우저 호환성을 위한 자동 접두사 처리기입니다.

🛠️ 초기화 명령어로 설정 파일 생성

npx tailwindcss init -p

이 명령어를 실행하면 프로젝트 루트에 tailwind.config.js와 postcss.config.js 파일이 자동으로 생겨요.

둘 다 Tailwind 작동에 꼭 필요한 설정 파일입니다.

📁 생성된 파일 구조

tailwind-vite-app/
├─ tailwind.config.js
└─ postcss.config.js

여기까지 문제 없이 따라오셨다면 거의 반은 끝난 거예요.

다음은 Tailwind가 적용될 수 있도록 실제 설정을 커스터마이징하는 단계로 넘어가 볼게요.

 

 

3. Tailwind 설정 파일 구성 ✏️

이제 우리가 만든 프로젝트에서 Tailwind CSS가 제대로 작동하도록 설정을 커스터마이징해볼게요. tailwind.config.js 파일 안에서 중요한 건 content 속성입니다.

이 속성은 Tailwind가 어떤 파일을 분석해서 클래스를 적용할지 알려주는 부분이에요.

📄 tailwind.config.js 파일 수정하기

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이렇게 설정하면 index.html뿐만 아니라, src 폴더 내 모든 JS/TS/React 파일까지 Tailwind 클래스를 스캔합니다.

🧩 참고: JSX/TSX 사용 시 주의사항

React 기반 프로젝트를 사용할 경우 파일 확장자가 .jsx나 .tsx일 수 있으니 꼭 포함시켜야 해요.

안 그러면 Tailwind 클래스가 적용되지 않아 “왜 안 되지?” 하고 머리 싸매는 일이 생깁니다 😅

🗂 postcss.config.js는 그대로 두면 OK

postcss.config.js 파일은 Tailwind 설치 시 자동으로 아래와 같이 세팅돼요.

별도로 수정할 필요는 없습니다.

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

이제 설정은 모두 끝났습니다!

다음 단계에선 실제로 Tailwind 클래스를 적용해 보고 브라우저에서 확인해 볼 거예요.

 

 

4. 글로벌 스타일 세팅 및 적용 🎨

Tailwind CSS가 프로젝트에 제대로 적용되려면 index.css 또는 style.css 같은 스타일 파일에서 Tailwind의 기본 디렉티브를 불러와야 해요.

이제 진짜 CSS와 만나는 순간이죠!

📄 style.css 파일 만들기

src 폴더 아래에 style.css 파일을 만들고, 다음과 같이 입력해 주세요.

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

이 세 가지 디렉티브는 Tailwind의 핵심이에요. 각각의 역할은 아래와 같아요 👇

디렉티브	설명
@tailwind base	Reset과 Normalize 스타일이 포함된 기본 스타일 세트
@tailwind components	사용자 정의 가능한 컴포넌트 스타일 정의
@tailwind utilities	Tailwind의 핵심 유틸리티 클래스들 포함

📌 main.js에서 스타일 불러오기

// src/main.js 또는 main.ts
import './style.css'

이 한 줄이 있어야 Tailwind CSS가 브라우저에 반영돼요.

의외로 이걸 빼먹어서 “왜 안되지?” 하는 분들 많더라고요 😅

 

이제 브라우저에서 Tailwind 클래스가 적용된 모습까지 확인할 수 있습니다!

다음 단계에선 진짜 Tailwind로 화면에 스타일을 입혀보는 실전 예제를 다뤄볼게요 💡

 

 

5. 실전 사용 예제 🧪

이제 준비는 끝났고, 진짜 재미있는 시간!

Tailwind CSS를 활용해서 예쁜 UI를 만들어봅시다.

이 섹션에서는 단순한 카드 컴포넌트를 예제로 사용해 Tailwind의 유틸리티 클래스가 어떻게 동작하는지 보여드릴게요.

💳 Tailwind로 만든 카드 UI 예제

<div class="max-w-sm mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-10">
  <img class="w-full h-48 object-cover" src="https://source.unsplash.com/random/400x200" alt="랜덤 이미지">
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-800 mb-2">Tailwind Card</h2>
    <p class="text-gray-600">이 카드는 Tailwind CSS만으로 스타일링 되었습니다. 정말 깔끔하죠?</p>
    <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">자세히 보기</button>
  </div>
</div>

위 코드를 index.html의 <body> 안에 붙여넣고 실행해보세요.

놀라운 건 단 한 줄의 CSS 코드도 직접 작성하지 않았다는 것이죠!

📌 실전 적용 포인트 요약

• flex, grid 같은 레이아웃 클래스도 직관적으로 사용 가능
• 반응형 디자인은 sm, md, lg, xl 프리픽스로 처리 가능
• 다크모드도 dark: 접두사 하나로 해결

Tailwind CSS는 그냥 “디자인 프레임워크”가 아니라, 생산성과 디자인 자유도를 동시에 만족시키는 도구예요.

여러분도 지금 바로 실습해보세요!

 

 

6. 자주 발생하는 문제 해결법 🧯

Tailwind를 적용하다 보면, 생각보다 자잘한 문제들이 종종 발생하죠.

“왜 클래스가 적용이 안 되지?” 같은 고민, 한 번쯤 해보셨을 거예요.

자주 발생하는 문제들과 그 해결책을 정리해봤어요.

❗ 클래스가 적용되지 않아요

• style.css에 @tailwind 디렉티브가 빠졌는지 확인
• main.js에서 style.css를 불러오지 않았는지 확인
• tailwind.config.js의 content 경로가 누락되었는지 점검

❗ 빌드시 적용 안 되는 문제

Vite의 빌드 모드에서는 필요 없는 클래스가 자동으로 제거돼요.

근데 실제로는 동적으로 쓰는 클래스가 잘려나갈 수도 있거든요.

이럴 땐 Safelist 기능을 이용해서 강제로 포함시켜야 해요.

// tailwind.config.js
module.exports = {
  content: [...],
  safelist: ['bg-red-500', 'text-xl', 'md:grid'],
  ...
}

🔍 기타 팁

• 브라우저 캐시를 지우고 새로고침 해보세요 (Ctrl+Shift+R)
• VSCode를 쓰고 있다면 Tailwind IntelliSense 확장도 함께 쓰면 편리합니다!

처음엔 어렵게 느껴질 수도 있지만, 자꾸 해보다 보면 Tailwind는 어느 순간 "손에 붙는" 툴이 됩니다.

가볍게 실수하고 고치면서 익숙해지세요!

 

 

마무리 🎁

지금까지 Vite 프로젝트에서 Tailwind CSS 최신버전 설치와 사용법을 단계별로 알아봤습니다.

복잡해 보였던 Tailwind 설치 과정도 이렇게 정리해보니 생각보다 간단하죠?

Vite의 빠른 빌드 속도와 Tailwind의 유연한 스타일링이 만나면 정말 강력한 개발 환경이 완성됩니다.

이제 여러분도 Tailwind를 활용한 멋진 UI 컴포넌트를 만들 준비가 됐습니다.

이 글이 여러분의 프론트엔드 개발 여정에 조금이나마 도움이 되었다면 정말 기쁠 것 같아요!

다음 글에서는 Tailwind로 반응형 웹 만들기도 다뤄볼 예정이니 기대해주세요 📱💻

 

Tailwind는 결국 직관과 실전이 전부입니다.

직접 써보며 감을 잡고, 자주 활용해보세요! 그게 최고의 학습법입니다.