1. 기존에 설치되었으면 삭제
[code]
npm uninstall tailwindcss postcss autoprefixer
[/code]
2. 설치
: postcss8 이 지원되지 않기때문에 7 호환으로 설치한다.
[code]
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
[/code]
3. tailwindcss 초기화
[code]
npx tailwindcss init
[/code]
아래 파일이 생성됨
/tailwind.config.js
/postcss.config.js
4. postcss.config.js
[code]
const autoprefixer = require(‘autoprefixer’)
const tailwindcss = require(‘tailwindcss’)
module.exports = {
plugins: [tailwindcss, autoprefixer],
}
[/code]
5. assets/scss/tailwindcss.scss
[code]
@tailwind base;
@tailwind components;
@tailwind utilities;
[/code]
6, main.js 에 import 한다
[code]
import ‘./assets/scss/tailwind.init.scss’
[/code]
