Vue 3 ) Vite 2로 생성한 프로젝트에 TailwindCSS 적용하기

Vite로 생성한 Vue3 프로젝트에 TailwindCSS 적용하기

1. 프로젝트를 생성

npm init @vitejs/app vue3-blog
cd vue3-blog

• 저는 vite 2 버전으로 프로젝트를 생성했습니다.

2. TailwindCSS 설치

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

• npm 을 통해 tailwindCSS 와 해당 종속성을 설치한 다음 init 명령을 실행해 tailwind.config.js 와 postcss.config.js 파일을 생성합니다.

3. 경로 설정

// tailwind.config.js

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

• 생성된 tailwind.config.js 파일에 경로를 추가합니다.

4. CSS에 Tailwind Directive 추가

src/index.css

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

• src 폴더 하위에 index.css 파일을 생성한 뒤 @tailwind 지시문을 추가합니다.

5. CSS 파일 Import

// main.js

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";

createApp(App).mount("#app");

• src/main.js 의 파일에 새롭게 만들어진 index.css 파일을 import 합니다.

6. 프로젝트 실행

• tailwindcss가 제대로 적용되었는지 테스트 해봅니다.

<template>
  <p class="text-xl text-red-600">Tailwind Test</p>
</template>