vue3 + vite
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Shell
복사
tailwind.config.js와 postcss.config.js 가 자동으로 생성된다.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
JavaScript
복사
tailwind.config.js
위 파일에서 eslint 오류 발생 시, eslint에 아래 코드 수정 필요
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
env: { node: true } // node 문법을 이해할 수 있도록 추가 필요.
}
JavaScript
복사
/src/assets/style.css를 생성하고 아래와 같이 추가
@tailwind base;
@tailwind components;
@tailwind utilities;
CSS
복사
/src/assets/style.css
main.js에 css 적용해주어야함
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './assets/style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
JavaScript
복사
/src/main.js
