安装Tailwind
npm install -D tailwindcss
创建配置文件
npx tailwindcss init
会在项目中创建tailwind.config.js文件
在tailwind.config.js中添加代码:
/ @type {import('tailwindcss').Config} */
module.exports = {
content: [ './src//*.{html,vue,js}' ],
theme: {
extend: {}
},
plugins: []
}
引入Tailwind样式到项目中
在assets中创建一个tailwind.css样式文件,引入:
@tailwind base;
@tailwind components;
@tailwind utilities;
使用命令:
npx tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch
在main.js中引入:
import './assets/tailwind.css'
import './assets/output.css'
在package.json中加入:
"tail": "tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch"
重启项目即可。