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使用方法简单,可以在官网的文档中查看具体的使用方法。