vue-cli3.0使用引入tailwindcss步骤

第一步    看文档

文档地址：https://www.tailwindcss.cn/

第二步   安装@vue/cli

npm install -g @vue/cli

第三步   安装Tailwind CSS

npm install tailwindcss

第四步  创建Tailwind配置文件

npx tailwind init
//或者自己创建js文件也行 tailwind.config.js 

这里面生成的js是没有配置的，这也是tailwindcss提供的私有化定制样式，如果嫌麻烦的话可以去官网下载官方提供默认配置：

地址：https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js

第五步  创建postcss.config.js  （建议和tailwind.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里面引入tailwindcss的样式即可

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

总结

如果想要tailwindcss语法提示可以使用vscode插件

Tailwind CSS IntelliSense