vue3+vite配置tailwindcss全过程
作者：不想起名55
这篇文章主要介绍了vue3+vite配置tailwindcss全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
安装
npm install autoprefixer tailwindcss @uni-helper/vite-plugin-uni-tailwind -D
- autoprefixer ：自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里。
- @uni-helper/vite-plugin-uni-tailwind: 将 Tailwind CSS 框架集成到使用 Vite 作为构建工具的 UniApp 项目中
我的版本
修改配置文件
tailwind.config.ts
module.exports = {
content: ["index.html", "./src/**/*.{html,js,ts,vue}"],
theme: {
extend: {},
},
plugins: [],
};postcss.config.ts
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}vite.config.ts
import tailwindcss from "tailwindcss";
import uniTailwind from "@uni-helper/vite-plugin-uni-tailwind";
export default defineConfig({
plugins: [uni(), uniTailwind()],
css: {
postcss: {
plugins: [tailwindcss()],
},
},
});
引入tailwindcss 指令
在src目录下新建assets目录，新建tailwind.css 文件
@tailwind base; @tailwind components; @tailwind utilities;
在App.vue中引入
测试
<view class="bg-black text-orange-500"> <text>1</text> <text>2</text> </view>
总结
- 报错的时候先去官网看案例，查博客版本依赖不一样可能会被带偏；
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。