VueCLI3+项目使用tailwindcss 详细步骤流程

1、tailwindcss安装

npm install tailwindcss

2、tailwindcss配置

在main.js中引入

import "./assets/tailwind.css";//引入tailwind

在./assets/tailwind.css中写

@tailwind base;

@tailwind components;

@tailwind utilities;

3、创建您的Tailwind配置文件

npx tailwindcss init -p

会自动生成 tailwind.config.js 文件

postcss.config.js自己创建->文件内容

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    //...process.env.NODE_ENV === 'production'
    //? [purgecss]
    //: []
  ]
}
//里面有些要注释掉，不然打包之后有些css不生效，具体什么原因不生效，现在还不知道