vue3+vite配置tailwindcss全过程
更新时间：2025年06月12日 09:46:31 作者：不想起名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>
总结
- 报错的时候先去官网看案例，查博客版本依赖不一样可能会被带偏；
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue使用v-model实现父子组件传值之子父组件同步更新方式
文章主要介绍了Vue2和Vue3中父子组件间通过props和emit实现双向绑定的方法,Vue2中,子组件通过props接收值,通过$emit触发change事件修改父组件数据；Vue3中方法类似,但语法略有不同2026-05-05
这篇文章主要介绍了Vue3 keep-alive用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2026-03-03
在Vue.js3中,组件通信主要包括父子组件通信、兄弟组件通信以及祖孙组件通信,这篇文章主要介绍了Vue3组件通信具体用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-09-09
这篇文章主要介绍了vue移动端项目中如何实现页面缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
浅析vue 函数配置项watch及函数 $watch 源码分享
这篇文章主要介绍了vue 函数配置项watch及函数 $watch 源码分享 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
基于Vue-cli 项目产品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，极大的降低了效率。这篇文章主要介绍了基于Vue-Cli 打包自动生成/抽离相关配置文件 ,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了Vue中如何使用ElementUI实现图片上传,这里用了elementUI的一个简单的例子，给大家介绍的非常详细，需要的朋友可以参考下2024-03-03
最近学习了hooks,特地写一篇文章加深一下印象,下面这篇文章主要给大家介绍了关于vue3 hook自动导入原理及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了记一次Vue.js混入mixin的使用(分权限管理页面)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
本篇文章主要介绍了Vue中保存用户登录状态实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。、2017-06-06
最新评论