vue2에서 사용하는 방법 기록
이미 8버전이 설치되어 있는 경우 먼저 삭제
// uninstall
npm uninstall tailwindcss postcss autoprefixer
설치
// install
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
23.4.12 기준 vue2 확인
"@tailwindcss/postcss7-compat": "^2.2.17",
설치 확인 됨
초기화
// init
npx tailwindcss init -p
초기화를 하면 파일이 생성됨
/postcss.config.js
/tailwind.config.js
최적화
postcss.config.js
// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
],
};
파일 정리
tailwind.config.js
// tailwind.config.js
module.exports = {
purge: [
'./public/**/*.html',
'./src/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
css 생성
import하기 위한 css파일을 만들어 내용을 넣어준다.
(경로는 편한곳에)
// src/assets/css/tailwindcss.css
@tailwind base;
@tailwind components;
@tailwind utilities;
css import
main.js
생성된 css를 import해준다.
(경로는 위에서 생성한 곳의 경로)
// main.js
// 경로는 생성한 파일의 위치
import './assets/css/tailwindcss.css';
import "@/assets/css/tailwindcss.css";
실행
npm run serve
끝
반응형