1.安装

最新的tailwind css使用post css 8版本，vue2不支持，所以需要指定安装postcss7的版本

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

2.生成配置文件

在终端中输入代码:npx tailwindcss init生成一个空的配置文件。也可以生成一个包含所有默认配置的配置文件:npx tailwindcss init -fill。

npx tailwindcss init # 空的
npx tailwindcss init -fill # 包含默认的

这就创建了一个简单的配置文件，你可以在这个文件里定制你的tailwindcss （参考官网文档）

3.创建postcss文件

在项目的根目录下创建postcss.config.js文件。输入以下代码：

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

4.在main.js中引入

直接在main.js中添加以下代码

import "tailwindcss/tailwind.css"

总结

在vue2中安装引入tailwindcss的方法主要分为4步

• 安装对应版本的tailwindcss
• 使用代码生成配置文件
• 创建postcss.config.js文件
• 在main.js中引入 tailwindcss使用方法简单，可以在官网的文档中查看具体的使用方法。