tailwindcss使用教程

安装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"

重启项目即可。