在Vue 2 项目中使用 Tailwind CSS 需要经过以下几个步骤:安装 Tailwind CSS、在 Vue 项目中配置 Tailwind CSS,以及在 Vue 组件中引入和使用 Tailwind CSS 样式。下面我将分点详细解释这些步骤: 1. 安装 Tailwind CSS 首先,你需要在你的 Vue 项目中安装 Tailwind CSS 及其依赖。你可以使用 npm 或 yarn 来安装...
Vue2中使用tailwindcss 第一步、创建项目 vue create test-tailwindcss 第二步、安装tailwind css npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 会有警告,不用管。 第三步、创建配置文件 # 创建一个空的tainwind css配置文件 npx tailwind...
3. main.js中引入 import"./assets/tailwindcss.css" 4. 在项目根目录执行以下命令: npx tailwindcss init -p 发现在根目录下多了2个文件. 5. 测试一下 111111 如果有背景颜色, 那就说明可以使用 (不行的话, 重启一下项目就可以了)
module.exports ={ plugins: { tailwindcss: {}, autoprefixer: {}, } 第四步:在main.js中引入tainwind css 然后先简单使用看看看看样式是否有变化 1 vue2 恭喜你成功了,开始使用吧
这里我再介绍一个组件UI库,方便直接开箱即用TailwindCSS。很早之前,个人项目就开始使用Vue3,但是目前Vue3的组件,大部分还是Alpha阶段。 比如:Vue2阶段很火的Element UI,目前我认为Element Plus还没发展到像2.0时候那样好用。而且我很不适应的地方:label会被用来作为值,但label这个单词本身并没有值的含义!
Vue2 + tailwindcss 初始化 新建Vue2 项目 通过vue-cli创建一个叫v2-tailwind的项目: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 vue create vue2-tailwind 根据需要选择其他的功能插件,例如:Babel, Router, Vuex, CSS Pre-processors, Linter。
uni-app (vue2/3) 在创建uni-app项目时,请选择uni-app alpha版本 这是因为目前默认创建的版本还是使用的 @vue/cli 4.x 的版本,它使用 webpack4 和postcss7,而 alpha 版本使用 @vue/cli 5.x 即webpack5 和postcss8,这可以使用最新版本的 tailwindcss。 vue create -p dcloudio/uni-preset-vue#alpha ...
vue2 + vite 配置 tailwindcss 不生效 按照网上的方法配置,包括官网的 vue3 + vite 配置tailwind文档。 配置好久都没有效果,编译出来的文件是这样的 可以看到样式并没有编译出来。 经过各种探讨,参考vue2配置的tailwind,发现有人需要单独在vue.config.js加一个配置...
原生css 在实际落地中存在以下问题,详情见另一篇文章:vue项目css选型1-原生css的问题 样式的定义顺序影响了最终样式 层叠样式的特点导致渲染结果难以预期 tailwind 原子类解决了以上问题 使用@tailwind 和核心插件配置决定样式的定义顺序,提供了合理的默认顺序 通过预先定义的实用 class,实现了当前类只对当前标签生效的特...
1. npm create vite@latest my-project -- --template vue 创建基础项目 2. npm install -D tailwindcss postcss autoprefixer 这里如果这么安装 应该是tailwind 版本原因 会导致下一步报错 所以我建议 tailwind 安装固定版本@3.4 3.npx tailwindcss init -p 创建配置文件 ...