vue3 vite 프로젝트에 tailwind 설치하는 법
January 28, 2023
패키지 설치
Tailwind와 peer-dependencies를 설치합니다.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest설정 파일 생성
tailwind.config.js, postcss.config.js를 아래 명령어로 생성합니다.
npx tailwindcss init -pperge 옵션을 주면 Tailwind가 tree-shaking을 하면서 사용하지 않는 스타일을 production build에서 제거합니다.
// tailwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}index.css 추가
@tailwind directive를 사용해 Tailwind style들을 추가합니다. Tailwind가 build time에 해당 directive들을 스타일로 변환합니다.
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;index.css import
마지막으로 main.js에 css 파일을 추가해주면 끝입니다.
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')설정 변화
tailwind v3이상을 쓰신다면! purge -> content로 rename되었으니 바꿔주세요.
// tailwind.config.js
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}그리고 darkMode 기본값이 media로 변경되었다고 합니다. 그래서 따로 지정해주시려는 게 아니면 darkMode를 지워주셔도 되겠습니다 :)
더 자세한 내용은 아래 가이드를 참고해주시면 됩니다. 감사합니다.
