vue使用tailwindcss

安装

npm install tailwindcss

引入

1. 创建css文件

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

2. 在main.js中引入上述文件

import '@/style/index.css'

部分node版本可能需要设置vue.config.js

 css: {
   loaderOptions: {
      postcss: {
         plugins: [require('tailwindcss'), require('autoprefixer')]
       }
     }
 },

初始化

生成tailwind.config.js和postcss.config.js文件

npx tailwind init 

运行代码

问题

PostCSS plugin tailwindcss requires PostCSS 8.

原因:版本太高

解决方案:

# 删除原来安装的包
npm uninstall tailwindcss postcss autoprefixer
# 安装低版本包
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9