FrontendVueTailwind

[Vue 3] - Tailwind 사용하기

1. Vue3 프로젝트 생성

npm init vue@latest my-vue3-app
cd my-vue3-app
npm install

2. Tailwind Css 설치

Tailwind CSS와 관련된 패키지를 설치합니다.

npm install -D tailwindcss postcss autoprefixer

그런 다음 Tailwind CSS 초기화를 진행합니다.

npx tailwindcss init

이 명령어를 실행하면 프로젝트 루트 디렉토리에 tailwind.config.js 파일이 생성됩니다.

3. Tailwind CSS 구성

생성된 tailwind.config.js 파일을 열고, 아래와 같이 content 필드에 Vue 파일 경로를 추가합니다:

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

4. CSS 파일 설정

Tailwind CSS를 사용하려면 CSS 파일에 Tailwind의 기본 디렉티브를 추가해야 합니다.

src/assets/tailwind.css 파일을 생성하고, 아래 내용을 추가합니다:

tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

5. Tailwind CSS를 프로젝트에 포함

src/main.js 또는 src/main.ts 파일에서 생성한 CSS 파일을 import합니다

main.ts
import { createApp } from 'vue';
import App from './App.vue';

// Tailwind CSS 추가
import './assets/tailwind.css';

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