第一步：通过 npm 安装 Tailwind
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
第二步：作为 PostCSS 插件来添加 Tailwind
在根目录新建一个文件“postcss.config.js”,添加以下内容
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
第三步：创建配置文件
npx tailwindcss init
这将会在您的工程根目录创建一个最小的 tailwind.config.js 文件。
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: [
'./public/*.html',
'./src/**/*.vue',
'./src/**/*.ts',
'./src/*.vue',
'./src/*.ts',
],
content: [],
theme: {
extend: {},
},
plugins: [],
}
使用 Tailwind 的 purge 选项来 tree-shake 优化未使用的样式，并优化您的最终构建大小当使用 Tailwind 删除未使用的样式时，很难最终得到超过 10kb 的压缩 CSS
第四步：引入tailwind样式
在main.ts文件中引入样式
// main.ts
import "tailwindcss/tailwind.css"
