【Vue】RuoYi-Vue 若依 vue3 版本安装 tailwindcss 不生效问题

原创 已于 2024-08-06 10:09:21 修改 · 1.6k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 #tailwindcss

于 2024-08-06 10:05:58 首次发布
该文章已生成可运行项目，

解决方法

删除默认安装教程下的 postcss.config.js

将配置转移到 vite.config.js 中，不生效原因我推测是因为 vite.config.js 配置 postcss 这段覆盖了 postcss.config.js 所致

代码修改如下：
在这里插入图片描述
另外原博主友情提示，引入的TailwindCSS的样式建议放在element的样式之前，防止EP的样式覆盖

感谢原解答

Vue3+vite版本 , 按照tailwindcss官网的方式安装tailwindcss无效

本文章已经生成可运行项目
基于若依Vue框架的RuoYi-Vue-PMS设备管理系统设计源码
10-01
基于若依Vue框架的RuoYi-Vue-PMS设备管理系统是一款专业的设备管理软件，该系统的设计源码已经被封装成压缩包文件，供开发者下载使用。该系统包含多个文件，涉及后端的Java文件、前端的Vue、SVG、JavaScript等文件，...
RuoYi-Vue-Plus 是重写 RuoYi-Vue 针对 分布式集群与多租户 场景全方位升级(不兼容原框架)
06-02
这个项目在原有基础上进行了深度改造，以满足大规模、高并发、多组织结构的业务需求，但需要注意的是，RuoYi-Vue-Plus 与 RuoYi-Vue 原框架并不兼容，这意味着迁移和升级需要进行一定的代码调整。 一、Vue.js 技术...
RuoYi-Vue3多环境配置：开发、测试与生产环境隔离方案
gitblog_00658的博客
09-20 1195
你是否还在为开发、测试、生产环境的配置混乱而困扰？频繁修改接口地址、切换环境变量导致线上事故？本文将基于RuoYi-Vue3框架，提供一套完整的多环境隔离方案，通过Vite构建工具实现环境配置的优雅管理，让你彻底告别"改配置"的噩梦。 读完本文你将掌握： - 3种环境的配置文件组织方式 - 环境变量注入与使用技巧 - 接口请求地址的动态切换方案 - 构建命令的优化与扩展 - 配置隔离的最佳实践 ...
vue3+vite5，引入tailwindcss不生效的原因
weixin_61498310的博客
05-16 7083
新版本的vite不需要创建scss样式文件，直接在main.js中导入import "tailwindcss/tailwind.css";另外，对于vite4及以上版本，vite.config.js不需要对tailwind做任何配置，postcss插件vite内部会自动引入进行运行。在App.vue,将img标签的class设置为class='bg-red-900'和class='bg-orange-600'若页面中出现如下红色和橙色背景，则表示tailwindcss引入成功。
Vue 3 项目集成 Element Plus + Tailwind CSS 详细教程
最新发布
tachyonxue的博客
10-03 1015
TachyonXue本教程基于环境（当前主流轻量构建工具），从“项目初始化”到“功能验证”全程拆解，每一步均包含“操作命令”“代码解释”“关联依赖说明”，确保零基础也能理解。
vue3+vite+tailwind.css无效问题，兄弟们我来解救你们了
qq_42957741的博客
01-09 3017
1.按照文档配置，原模原样写，最终发现没效果。那是应为vite.config.ts没有配置，保你100%有效果！
vue3 + vite 使用Tailwind不生效
weixin_44945533的博客
03-25 1569
【代码】vue3 + vite 使用Tailwind不生效。
tailwindcss配之后不生效
weixin_50572526的博客
01-24 5271
以上配置完成 为了方便使用在vscode里面添加一个插件，这样每次能提醒相关class类名。重点我出现了bug，配置完成没问题之后，相关的class不生效。看到了没引入的 css样式没解析，为了让他解析成功。vite.config.js里面加上。然后问题就解决拉拉~~~~~~
tailwinscss不生效的原因
fengxiaoyangfeng的博客
12-04 5022
在 tailwind.config.js 中，确保 content 数组包含了所有需要扫描的文件路径
若依ruoyi ruoyi-vue ruoyi-cloud 微服务全网最全视频教程网盘资源
12-25
若依ruoyi ，ruoyi-vue， ruoyi-cloud， 微服务全网最全视频教程网盘资源 若依框架系列视频教程(RuoVi-Vue前后端分高版本) 01 项目概述,mp4 02 项目运行,mp4 03 构建发布到 RuoYi-Cloud 微服务版本视频课程目录 ├...
RuoYi-Vue-Plus 是重写 RuoYi-Vue
03-07
《RuoYi-Vue-Plus：分布式集群与多租户场景下的全面升级》 RuoYi-Vue-Plus 是一款基于 Vue.js 框架的后台管理系统，它是 RuoYi-Vue 的全新升级版，专为分布式集群和多租户环境进行了深度优化。在原有框架的基础上，...
若依系列RuoYi-Vue前后端分离版（127集，3.8.6）、RuoYi-Cloud微服务版本（142集，3.6.3）
08-01
ruoyi-vue: 127 3.8.6版本更新介绍.mp4 126 实现ehcache本地缓存.mp4 125 3.8.5版本更新介绍.mp4 124 实现多数据源增强.mp4 123 实现第三方授权登录.mp4 122 3.8.4版本更新介绍.mp4 121 3.8.3版本更新介绍.mp4 120 ...
若依添加tailwindcss不生效解决整理
晴天的博客
03-19 567
若依开源添加tailwindcss报错问题的解决
解决vite项目tailwindcss不生效！！（Vue3、tailwindcss失效）
xxx
11-08 4928
vite.config.ts或者vite.config.js// ...plugins: [// ...config: 'tailwind.config.js', // Tailwind CSS 配置文件路径}),],})
tailwindcss在Vue2使用，不生效解决
热门推荐
xxx
03-23 1万+
直接安装 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 创建postcss.config.js // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } 创建tailwind.config.js npx tailwindcss i
tailwind css部分样式无效的一个原因
优快云_Sviexu的博客
02-22 2766
在上述例子中，如果calcColor在计算后得到“red”，但在编译的时候，tailwind css 任务‘text-red-600’并没有被使用，所有就不会将对应的样式打包进最终的css文件中。组件中的颜色是通过匹配动态变化的，而tailwind css引入JIT( just in time)模式，JIT 会动态编译 CSS，在使用时生成样式，从而显著减小文件大小。以上组件的calcColor是动态计算的，编译出的html中的类也是动态改变的，但是文字颜色并不会改变。
vue3中使用 tilwindcss报错 Unknown at rule @tailwindcss
红烧咸咸鱼
07-08 621
vue3中使用 tilwindcss报错 Unknown at rule @tailwindcss
ruoyi前端vue3 集成tailwind
pantain的博客
09-06 720
5.调整 tailwind.config.js。
在若依管理后台vue2版本中使用tailwindcss
li820567094的博客
02-26 809
本文参考了。
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值