首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue2中使用tailwindCss

Vue2中使用tailwindCss的详细教程

2024-09-27 09:20:39 作者：Bubluu

Tailwind CSS是一个流行的前端CSS框架,它基于原子设计原则,提供了一套预构建的CSS样式类,旨在帮助开发者快速地创建响应式、可定制的用户界面,本文给大家介绍了Vue2中使用tailwindCss的详细教程,需要的朋友可以参考下

一、tailwindCss

1、先看官方文档：

https://www.tailwindcss.cn/

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！