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中setup的props和context
setup是一个组件选项,在组件被创建之前,props被解析之后执行,这篇文章主要介绍了Vue中setup的props和context的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-04-04
在 Web 应用程序中,有时需要为某些内容提供全屏显示的功能,本文将介绍如何使用 Vue.js 3 的 Composition API 创建一个全屏功能的工具类,希望对大家有所帮助2024-03-03
vue-calendar-component 封装多日期选择组件的实例代码
这篇文章主要介绍了vue-calendar-component 封装多日期选择组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
本文主要介绍了vue中添加语音播报功能的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了Vue实现购物车的基本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
name 属性是可选的,不写它似乎也“没问题”,但其实它在某些场景中非常重要,下面我们来详细说明它的作用和典型用法,感兴趣的朋友跟随小编一起看看吧2025-05-05
这篇文章主要为大家详细介绍了Vue项目中如何实现表格选中数据的Excel导出功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下2025-10-10
这篇文章主要介绍了Vue异步更新DOM及$nextTick执行机制解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最近做个项目，需要实现获取当前位置的经纬度，所以本文主要介绍了vue中调用百度地图获取经纬度的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本篇文章主要介绍了详解vue嵌套路由-query传递参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论