你可以使用以下命令来构建并运行你的 Vue 项目: bash npm run serve 然后,在浏览器中打开你的应用,检查 Tailwind CSS 的效果。 通过以上步骤,你应该能够在 Vue 2 项目中成功配置并使用 Tailwind CSS。如果遇到任何问题,请检查你的依赖版本和配置文件设置是否正确。
第一步、创建项目 vue create test-tailwindcss 第二步、安装tailwind css npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 会有警告,不用管。 第三步、创建配置文件 # 创建一个空的tainwind css配置文件 npx tailwindcss init # or # 你...
1. 直接安装 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7autoprefixer@^9 2. 创建文件tailwindcss.css @import"tailwindcss/base"; @import"tailwindcss/components"; @import"tailwindcss/utilities"; 3. main.js中引入 import"./assets/tailwindcss.css" 4. 在项目根目录执行以...
第一步:直接安装 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7autoprefixer@^9 第二步:创建文件 tailwindcss.css, 推荐放到样式文件夹下,比如style/ 或者 assets/ 下面。 在tailwindcss.css 文件内写入如下内容: @import"tailwindcss/base"; @import"tailwindcss/components"; @impor...
npx tailwindcss init-p 代码语言:javascript 代码运行次数:0 运行 AI代码解释 module.exports={plugins:{tailwindcss:{},autoprefixer:{},}} 代码语言:javascript 代码运行次数:0 运行 AI代码解释 module.exports={purge:["./src/App.vue","./src/views/**/*.{vue,js,ts,jsx,tsx}","./src/components...
vue2 + vite 配置 tailwindcss 不生效 按照网上的方法配置,包括官网的 vue3 + vite 配置tailwind文档。 配置好久都没有效果,编译出来的文件是这样的 可以看到样式并没有编译出来。 经过各种探讨,参考vue2配置的tailwind,发现有人需要单独在vue.config.js加一个配置...
原生css 在实际落地中存在以下问题,详情见另一篇文章:vue项目css选型1-原生css的问题 样式的定义顺序影响了最终样式 层叠样式的特点导致渲染结果难以预期 tailwind 原子类解决了以上问题 使用@tailwind 和核心插件配置决定样式的定义顺序,提供了合理的默认顺序 通过预先定义的实用 class,实现了当前类只对当前标签生效的特...
由于hbuilderx更新之后,它和tailwindcss v2的热更新产生了冲突,导致了#9这个问题。 想要绕过,你可以使用 vue3 版本,或者使用 vue2 的 cli 版本,它们都可以使用最新的 tailwindcss v3 版本! 此版本废弃!! 注意(重要):此版本由于目前 hbuilderX 含(alpha)版本,针对webpack打包的项目,只能使用postcss7无法使用最新...
EN本篇博客针对新vue2项目，老项目就先不说了哈哈(坑太多) 首先新建一个vue2项目 vue create simple-...
这是一个使用 `vue2` 来开发 `uni-app` 的模板,辅助以小程序定制化的 `tailwindcss` 由于受到 `@vue/cli-service` `4.x`版本中 `postcss 7.x` 的限制 , 所以 `tailwindcss` 降低了些版本 目前建议用此版本而不是 `vue3` 因为, 3 版本的 `uni-app` 生态并没有建立起了。 > ...