vue2中使用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>