Vue.js 프로젝트에 Tailwind CSS 3.4 설치하는 완벽 가이드

소개

최신 웹 개발에서 Vue.js와 Tailwind CSS는 개발자들 사이에서 인기 있는 조합입니다. 특히 Tailwind CSS 3.4 버전은 성능 개선과 새로운 기능들로 더욱 강력해졌습니다. 이 글에서는 Vue.js 프로젝트에 Tailwind CSS 3.4를 설치하고 구성하는 방법을 단계별로 알아보겠습니다.

 

Tailwind CSS 3.4 버전 설치가이드

 

사전준비

• Node.js 16.0.0 이상 설치
• Vue.js 프로젝트 생성 완료 (Vue 2 또는 Vue 3)
• npm 또는 yarn 패키지 매니저

 

설치과정

1. Tailwind CSS 패키지 설치

터미널을 열고 Vue.js 프로젝트 디렉토리로 이동한 후 다음 명령어를 실행합니다.

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

 

 

2. Tailwind 구성 파일 설정

생성된 tailwind.config.js 파일을 열고 다음과 같이 수정합니다.

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

 

3. CSS 파일에 Tailwind 지시어 추가

CSS 파일(보통 src/assets/main.css 또는 src/index.css)에 다음 코드를 추가합니다.

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

 

4. main.js에 CSS 파일 import 하기

Vue 프로젝트의 main.js 파일에서 CSS 파일을 import 합니다.

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'  // 경로는 프로젝트 구조에 따라 다를 수 있습니다

createApp(App).mount('#app')

 

사용예시

이제 Vue 컴포넌트에서 Tailwind 클래스를 사용할 수 있습니다.

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-md">
      <h1 class="text-2xl font-bold text-gray-800 mb-4">Tailwind CSS가 적용된 Vue 컴포넌트</h1>
      <p class="text-gray-600">Tailwind CSS 3.4와 Vue.js의 강력한 조합!</p>
    </div>
  </div>
</template>

 

Tailwind CSS 3.4의 주요 개선점

• 성능 최적화로 빌드 시간 단축
• 새로운 유틸리티 클래스 추가
• 다크 모드 향상된 지원
• 더 나은 호환성과 안정성

 

마무리

이 가이드를 통해 Vue.js 프로젝트에 Tailwind CSS 3.4를 성공적으로 설치했습니다.

이제 Tailwind의 강력한 유틸리티 클래스를 활용하여 빠르고 효율적으로 UI를 개발할 수 있습니다.

질문이나 문제가 있으면 댓글로 남겨주세요!