Vue Tailwind CSS 적용하기

1. 설치

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 활성화

npx tailwindcss init -p

 

3. ./tailwind.config.js환경설정

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

 

4. src/index.css 파일 생성 

@import "tailwindcss/base"; 
@import "tailwindcss/components"; 
@import "tailwindcss/utilities";

 

5. src/main.js적용

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

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