一、安装 Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init
二、配置模板文件的路径
在 tailwind.config.js 配置文件中添加所有模板文件的路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['index.html', 'src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
spacing: {
3.75: '15px'
},
colors: {
primary: '#165DFF',
danger: '#f56c6c',
wx: '#3975C6',
fff: '#fff'
}
}
},
plugins: []
}
三、在src/styles新建tailwind.css
将加载 Tailwind 的指令添加到你的 CSS 文件中
@tailwind base;
@tailwind components;
@tailwind utilities;
四、开启 Tailwind CLI 构建流程
运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。
npx tailwindcss -i ./src/style/tailwind.css -o ./dist/output.css --watch
五、vite.config.ts
import tailwindcss from 'tailwindcss'
export default defineConfig({
base: './',
server: {},
plugins: [],
resolve: {},
css: {
postcss: {
plugins: [tailwindcss],
},
},
build: {},
})
六、main.ts引入tailwind.css
import '@/styles/tailwind.css'
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_75014991/article/details/135824786