tailwindcss vue2简单配置

4,656 阅读1分钟

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