1、安装tailwindcss
“tailwindcss”: “^3.4.3”
npm i tailwindcss
2、package.json的scripts配置
新建两个css文件tailwindInput.css、tailwindOutput.css,注意路径是否正确
"useTailwindCss": "npx tailwindcss -i ./xxx/tailwindInput.css -o ./xxx/tailwindOutput.css --watch",
项目根目录新建tailwind.config.js
npx tailwindcss init
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: [
// 需要使用tailwindcss的文件
'./src/views/**/*.{vue,js}',
],
theme: {
backgroundColor: {
// 全局主题背景色,元素class属性使用class="bg-themeColor"
// themeColor: "#D72828",
},
colors: {
// 全局主题色,元素class属性使用class="text-themeColor"
// themeColor: "#D72828",
},
extend: {},
},
plugins: [],
}
3、项目全局引入tailwindOutput.css
4、运行项目的同时,启动useTailwindCss
npm run useTailwindCss