Vue js tailwindcss 적용하기

현재 개발환경 
Vue js 3.0 + vite + tailwindcss 적용된 상태입니다.

tailwindcss 인스톨 하는 것은 제가 이전 에 작성한 포스팅을 확인해주세요.
https://islet4you.tistory.com/entry/Tailwind-css-framework-install

Tailwind css framework install

1. tailwind.config.js 를 하나 생성해주세요.

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

2. index.css 파일을 제 프로젝트 경로에 있는 것처럼 추가해주세요.

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

3. main.js 를 아래와 같이 추가해주세요.

import VueRouter from 'vue-router'
import App from './App.vue'
import './index.css'
 



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

4. App.vue에 테스틀 위해 아래와 같이 추가해보세요.

5. 화면에 나온 모습

위와 같이 Hello world가 css가 먹힌 상태로 나온답니다.
한개씩 셋팅하고 진행하는게 쉽지는 않네요. 

참고사이트 
https://tailwindcss.com/docs/guides/vite

Installation: Tailwind CSS with Vue 3 and Vite - Tailwind CSS