解决vue-cli4.x 装tailwindcss遇到的坑

一、tailwind的配置和使用
1、配置项目
1.1新建项目
//第一步：
vue create “项目名”

//第二步
cd 项目名

//安装tailwind

 npm install tailwindcss

1.2在vscode里操作
1.2.1把建好的项目拖进vscode
1.2.2在项目的src/assets下，新建css文件夹
1.2.3在css文件夹里新建全局样式reset.css

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

1.3在main.js里（注意路径）
import ‘./assets/css/reset.css’

1.4在cmd里（官网提供这步，但我不用也能实现）

npx tailwindcss init --full

会生成一个tailwind.config.js文件

1.5src目录下新建postcss.config.js
并在该文件里复制如下代码

const rege = [
    /el-.+$/,
    /::-webkit/,
    /v-/,
    /^!/,
    /class/,
    /-(leave|enter|appear)(|-(to|from|active))$/,
    /^(?!(|.*?:)cursor-move).+-move$/,
    /^router-link(|-exact)-active$/,
    /data-v-.*/
]
const purgecss = require('@fullhuman/postcss-purgecss')({
    content: ['./public/**/*.html', './src/**/*.vue'],
    rejected: true,
    // https://github.com/FullHuman/purgecss/issues/439
    safelist: {
        standard: rege,
        deep: rege,
        greedy: [],
        keyframes: [],
        variables: []
    },

    defaultExtractor: (content) => {
        const tailwind = content.match(/[\w-/:]+(?<!:)/g) || []
            // !w-full
        const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

        // // el-table--scrollable-x
        // const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
        // const style = contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []

        return tailwind.concat(innerMatches) // .concat(style)
    }
})

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        // ...[purgecss]
        ...process.env.NODE_ENV === 'production' ?
        [purgecss] :
        []
    ]
}

1.6 运行
报错

解决：

npm uninstall tailwindcss postcss autoprefixer

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

————————————————
CSDN博主「Yomuki」

1.7 tailwindcss使用
class里，记得加空格

<template>
  <div class="about">
      <div class=" m-48">kgldf</div>
    
  </div>
</template>

注：
一、必须先执行1.1，再执行1.6 ;其中1.6步不能用cnpm，不然会报错。
二、本文中1.6步骤参考CSDN博主「Yomuki」和1.5步骤参考我同事高哥。
三、1.4步不用也可以实现tailwindcss功能，这步是官网提供的，欢迎共同讨论解决