vue2中安装tailwind教程与问题（发现vue cli版本过低）

1.安装

node：>=14.17.0

最新的tailwind css使用post css 8版本，vue2框架暂时还不支持，需要指定安装postcss7的版本

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2.创建文件

npx tailwindcss init

创建了 tailwind.config.js 文件确保配置内容

module.exports = {
  purge: ["./src/**/*.{js,jsx,vue}", "./public/index.html"],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

4. 创建 Tailwind CSS 入口文件

在 src/assets 文件夹中创建一个名为 tailwind.css 的文件，并添加以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 配置 PostCSS
在项目根目录下创建 postcss.config.js 文件，并添加以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

6.全局引入Tailwind CSS

在 main.js 文件中引入 Tailwind CSS：

import './assets/tailwind.css';

7. 配置 Vue CLI
在 vue.config.js 文件中添加以下配置：

//这个适用于cli低版本我使用4.1和4.5都没有问题，
//具体可以查看package.json的"@vue/cli-service": "~4.5.0",
const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    publicPath: "/",
    transpileDependencies: [],
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('tailwindcss'), // 添加 Tailwind CSS
                    require('autoprefixer') // 添加 Autoprefixer
                ],
            },
        },
    },
};


//适用于cli5.0及以上，我测试使用的5.0
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
          ],
        },
      },
    },
  },
});

8.重新运行项目

更改配置文件后需要重新运行项目，如果不重新启动项目，项目仍会按照之前的配置进行运行和构建，新的配置无法发挥作用。

npm run serve