Vue2中使用tailwindCss的详细教程
更新时间：2024年09月27日 09:20:39 作者：Bubluu
Tailwind CSS是一个流行的前端CSS框架,它基于原子设计原则,提供了一套预构建的CSS样式类,旨在帮助开发者快速地创建响应式、可定制的用户界面,本文给大家介绍了Vue2中使用tailwindCss的详细教程,需要的朋友可以参考下
一、tailwindCss
1、先看官方文档：
2、先安装：npm install -D tailwindcss
---------------通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。
npm install -D tailwindcss
3、初始化文件—npx tailwindcss init
npx tailwindcss init
4、创建tailwindcss文件
在 assets 文件夹下创建 tailwendcss.css文件
@tailwind base; @tailwind components; @tailwind utilities;
5、在main.js中引入
import '@/assets/tailwindcss.css'
二、解决问题方案
1.使用px代替默认的rem单位
在tailwind.config.js文件中，将配置修改为以下内容
module.exports = {
purge: {
enabled: false,
content: ['./src/**/*.{js,jsx,ts,tsx}'],
},
content: [],
theme: {
spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {
map[index] = `${index}px`;
return map;
}, {}),
extend: {},
},
plugins: [],
};
2.vue2中由于版本问题 需要降低版本
由于最新的tailwind css使用post css 8版本，vue2框架暂时还不支持，所以需要指定安装postcss7的版本
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
3.vue2要在vue.config.js中配置
css: {
loaderOptions: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
},
},
标题然后重新运行即可—快来试试吧！
<div class="flex justify-center">flex居中</div> <div class="container mx-auto px-4">container mx-auto px-4</div>
到此这篇关于Vue2中使用tailwindCss的详细教程的文章就介绍到这了,更多相关Vue2中使用tailwindCss内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧2016-12-12
这篇文章给大家主要介绍了Vue.js中数组变动的检测，文中给出了详细的示例代码和过程介绍，相信会对大家的理解和学习很有帮助，有需要的朋友们下面来一起看看吧。2016-10-10
本文主要介绍了vue中对接Graphql接口的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
在本篇文章里小编给大家分享的是关于vuex入门最详细整理的相关内容，需要的朋友们参考下。2020-03-03
这篇文章主要介绍了iview实现select tree树形下拉框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要为大家介绍了vue组件生命周期钩子使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-04-04
这篇文章主要为大家介绍了vue前端实现打印下载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
Vue.js的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过vue.js动态绑定class就变得非常简单。一起来看下吧2016-12-12
Electron相当于一个浏览器的外壳,可以把现有的vue程序嵌入到壳里面,下面这篇文章主要给大家介绍了关于如何使用electron将vue项目打包成exe的相关资料,需要的朋友可以参考下2023-01-01
vue解决使用webpack打包后keep-alive不生效的方法
今天小编就为大家分享一篇vue解决使用webpack打包后keep-alive不生效的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论