1、先创建 vue 项目

vue create tailwind

2、创建完后，添加 tailwind css

# Using npm

npm install tailwindcss

# Using Yarn

yarn add tailwindcss

3、创建 css 文件

./assets/css/tailwind.css

4、添加 tailwind.css 内容

@tailwind base;

@tailwind components;

@tailwind utilities;

5、初始化 tailwind css

npx tailwind init

7、在根目录下创建 postcss.config.js

8、安装 postcss-purgecss

# Using npm

npm install @fullhuman/postcss-purgecss --save-dev

# Using yarn

yarn add @fullhuman/postcss-purgecss -D

9、配置 postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({

// Specify the paths to all of the template files in your project

content: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', // etc. ],

// 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] : [] ] }

Done!!!!

可以在 vue 下使用 tailwindcss 了。