🌦🌦-vite+vue3使用tailwindcss
由于最新官网的方案没效果。
1.安装tailwindcss
1
| npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
|
2.创建tailwindcss的配置文件
这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件：
1
2
3
4
5
6
7
8
9
| /** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {}
},
plugins: []
}
|
3.在入口中引入tailwind
1
2
| // main.ts
import "tailwindcss/tailwind.css"
|
4.配置tailwind.config.js文件
1
| content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
|
在 tailwind.config.js 文件中，配置 content 选项指定所有的 pages 和 components ，使得 Tailwind 可以在生产构建中，对未使用的样式进行tree-shaking。
5.配置vite.config选项
1
2
3
4
5
| css: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")]
}
}
|
使用postcss的tailwindcss和autoprefixer插件对，css进行处理
