vue2 tailwindcss jit模式下热更新失效

已于 2023-12-15 16:37:14 修改
阅读量2.5k 收藏 8
点赞数 6
文章标签： vue.js
于 2023-12-15 16:28:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44876807/article/details/135020316
版权

按照网上教程安装的tailwindcss，但是修改类名后热更新的时候样式没有生效，参考了大佬的文章，解决了该问题。
安装cross-env

修改前
"dev": " vue-cli-service serve",
修改后
"dev": "cross-env TAILWIND_MODE=watch vue-cli-service serve",

在这里插入图片描述

参考文章：https://blog.csdn.net/qq_35069272/article/details/121659771

小瓶子
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cra-tailwindcss-starter:在Create React App项目中配置的Tailwind CSS
04-30
创建React App + Tailwind CSS 该项目是通过引导的。 在Create React App项目中 。 安装 克隆存储库 git clone https://github.com/rutikwankhade/cra-tailwindcss-starter 更改当前目录 cd cra-tailwindcss-starter 安装所有必需的依赖项并运行 npm install npm start 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React
简单的Vue2Webpack2Express热更新工程模板
08-10
简单的 Vue2 Webpack2 Express 热更新工程模板
探索V2HOT：一款高效能的Vue组件热更新工具
最新发布
gitblog_00015的博客
04-21 393
探索V2HOT：一款高效能的Vue组件热更新工具 项目地址:https://gitcode.com/djyde/V2HOT V2HOT是一个由DJYDE开发的创新项目，它是一款专为Vue.js开发者设计的实时组件热加载和预览工具。借助V2HOT，你可以快速、无缝地测试和调试你的Vue组件，极大地提高了开发效率。 技术解析 V2HOT的核心在于它的热重载（Hot Module Replacement...
vue-tailwind-webpack：基本vue 3项目，带有tailwindcss，可切换暗模式
02-26
vue-tailwind-webpack 欢迎使用tailwindcss访问Vue.js 3。 在不使用Vuex的情况下使用全局存储。 支持暗模式，带有开关图标。 组合：webpack，babel，postcss，打字稿，eslint。 项目设置 npm install 编译和热重装以进行开发 npm run serve -- or npm start 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vite-windi-tailwind-jit-compare:Vite上的Windi CSS vs Tailwind CSS JIT
03-25
上的 vs yarn yarn dev 启动两个服务器 -Windi CSS -Tailwind CSS JIT 编辑App.vue将触发两个服务器的更新。 当前的源文件非常小而简单，我希望收到一个摘要示例，以供参考。 谢谢。 配置 使用纱线工作区提升机Vite通用部门，以确保它们使用的版本完全相同。 所有软件包版本都使用共享的锁定文件进行修复。 两种配置都仅对vue扩展启用观察程序。 尾风准时： 由自述文件中的指南进行配置。 在autoprefixer安装自动autoprefixer （Windi CSS具有此功能，但不需要此功能） Windi CSS ： 使用
Vite上的Windi CSS vs Tailwind CSS JIT-Vue.js开发
05-27
Vite上的Windi CSS vs Tailwind CSS JIT Vite上的Windi CSS vs Tailwind CSS JIT纱线开发人员启动了两个服务器http：// localhost：3100 /-Windi CSS http：// localhost：3200 /-Tailwind CSS JIT编辑App.vue将触发两个服务器的更新。 当前的源文件非常小而简单，我希望收到一个摘要示例，以供参考。 谢谢。 配置使用纱线工作区提升机Vite通用部门，以确保它们使用的版本完全相同。 所有软件包版本都用shar固定
vue 2.x 配置项目热更新
weixin_45940312的博客
12-05 2612
npm i vue-hot-reload-api //打开webpack.dev.conf.js 文件 devServer: { hot: true, // 模块热替换 设置 true, } //在 config 文件找到index.js找到 autoOpenBrowser 设置 true, 或者 npm i vue-hot-reload-api "scripts": { "dev": "webpack-dev-server --inline --hot --progress --confi
vue项目无法热更新 问题解决
倚楼听风雨的博客
11-24 2084
【代码】vue项目无法热更新 问题解决。
转载写代码的海怪 Vue 热更新成功，但浏览器不刷新
qq_35559000的博客
11-17 1431
vue 热更新成功 浏览器不刷新
vue.js 2.X--- 热更新配置
yinge0508的博客
10-14 4789
在使用vue-cli3搭建项目之后，发现更改.vue文件里面的代码后，页面显示效果不会自动刷新； 解决方案： 只需要在vue.config.js文件中配置一下就可以实现热更新了，如下： chainWebpack: config => { // 修复HMR config.resolve.symlinks(true); }, 修改css部分的内容并没有自动...
解决tailwindcss jit模式下在create-react-app无法热更新样式需要重启
qq_35069272的博客
12-01 1895
症状： 在用create-react-app创建的项目中 使用官网教程安装配置好tailwindcss并开启jit模式后每次更新代码样式并不会生效 必须重新编译才行 解决方法 注: 我的dev运行项目的script名为start 在根目录的package.json -> script -> start 在原有启动项目的命令前添加TAILWIND_MODE=watch { "scripts": { // 添加前 "start": "craco start", // 添加后 "st
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。 入门 在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind 选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果已经有了配置（确保配置PurgeCSS），则很有用。 最小（默认） -将创建一个最小的tailwind.config.js文件，您可以在其中定义自定义设置。 完整-将生成一个包含整个默认配置的tailwind.config.js文件。 有关更多信息，请参见。 PostCSS配置 Tailwind CSS将作为插件添加到您的PostCSS配置中。 // postcss.config.js module . exports = { plugins : { tailwindcss : { }
解决vuecli3.0热更新失效的问题
10-17
今天小编就为大家分享一篇解决vuecli3.0热更新失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
taiwindcss在vue-cli4的使用
qq_42372534的博客
07-20 222
由于vue-cli4集成的是postcss7,根据tailwindcss官网，作为postcss的plugin使用，只能使用其兼容版本"npm:@tailwindcss/postcss7-compat@^2.2.17"
在 HBuilderX 中使用 tailwindcss
ice breaker's blog
07-31 1368
之前我写了一个weapp-tailwindcss-webpack-plugin来兼容uni-app,taro等等各个框架，不过那时候提供的demo都是cli版本的。最近社区里有同学问我，HBuilderX要如何使用？今天就给大家带来HBuilderX中vue2和vue3各自的的使用方法。...
TailwindCSS使用并开启JIT（vue2）
醉梦者的博客
10-23 660
前提vue2工程不要安装官网最新版，因为vue2还不支持 init 配置 这样根目录多了两个文件 tailwind.config.js和postcss.config.js 重启项目npm run serve 这样基本上就开就可以用常规的那些类名来设置样式了，例如 m-20, p-200 ,text-200等。 修改tailwind.config.js 设置mode,和purge(文件的监控范围） 修改package.json的scripts指令 加入 cross-env TAILWIND_MODE=wat
Vue重新发布与软件热更新的经验分享
大剑师兰特的GIS世界
12-14 1496
在做vue项目时，每次打包发布新版到服务器上，相应的js，css等文件指纹都会发生变化。如何做热更新呢？ 在笔者的项目中，localstorage中存储了很多用户相关的信息。新发布的时候，某些信息必须要做出改变。这个时候要求用户要重新登录，重新获取信息存储到localstorage中。
Vite热更新失效
Ly
03-14 3479
vite热更新无效的解决办法，vue3+vite不热更新的解决方案，vue3+vite热更新失效问题，vue3无法热更新，1、每次更新代码都要重启项目是全量热更新的问题，如文件大小写问题、同一个文件夹下存在大驼峰小驼峰的命名方式的2种文件。 2、如果刷新页面会更新，可以确认一下vite.config.js内有无配置server:{hmr:true} 3、如果是页面级组件出现问题，极有可能是路由的文件或命名问题，引用组件则是组件引用地址和组件文件的写法问题！
tailwindcss在Vue2使用，不生效解决
xxx
03-23 9629
直接安装 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
vue3 tailwindcss项目
01-09
在Vue 3项目中使用Tailwind CSS，你可以按照以下步骤进行设置： 1. 首先，确保你已经安装了Vue CLI，并创建了一个新的Vue项目。 2. 在终端中进入你的项目目录，并安装Tailwind CSS和相关的依赖： ```shell npm install tailwindcss@latest postcss@latest autoprefixer@latest ``` 3. 创建一个`tailwind.config.js`文件来配置Tailwind CSS。在项目根目录下创建该文件，并将以下内容复制到文件中： ```javascript module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } ``` 4. 在项目根目录下创建一个`postcss.config.js`文件，并将以下内容复制到文件中： ```javascript module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ``` 5. 在你的Vue项目的`main.js`文件中导入Tailwind CSS的样式表。在文件的顶部添加以下代码： ```javascript import 'tailwindcss/tailwind.css' ``` 6. 现在你可以在你的Vue组件中使用Tailwind CSS的类了。例如，在你的组件模板中添加以下代码： ```html <template> <div class="bg-blue-500 text-white p-4"> This is a sample component using Tailwind CSS! </div> </template> ``` 7. 运行你的Vue项目，并查看效果： ```shell npm run serve ``` 这样，你就可以在Vue 3项目中使用Tailwind CSS了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值