在Vue中安装TailwindCSS

1.安装 Tailwind CSS

# 使用npm
$	npm install tailwindcss -D
# 使用yarn
$	yarn add tailwindcss -D

2.创建 Tailwind CSS 配置文件

$	npx tailwindcss init

3.配置tailwind.config.js

Since Tailwind no longer uses PurgeCSS under the hood, we’ve renamed the purge option to content to better reflect what it’s for: …
翻译: 由于Tailwind不再在幕后使用PurgeCSS，我们已经重新命名了净化选项内容，以更好地反映它的用途:

// /tailwind.config.js

module.exports = {
  // Tailwind CSS 3.0版本开始, 不再使用purgeCSS进行打包优化. 使用`content`配置项代替原`purge`配置项.
  content: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: []
  // 配置前缀, 防止类名与其他UI框架冲突
  // prefix: 'tw-'
}

4.安装 PostCSS 和 autoprefixer

如果使用npm
$	npm install postcss autoprefixer -D

如果使用yarn
$	yarn add postcss autoprefixer -D

## 创建 PostCSS 配置文件

```js
// 在最外层创建 /postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: { config: require('autoprefixer') }
  }
}

5.引入TailWindCSS

• 在src/assets 目录下创建 tailwindcss.css

// src/assets/tailwindcss.css

@tailwind base;
@tailwind components;
@tailwind utilities;

• 然后在 main.js 文件中引入

// /src/main.js
import './assets/tailwindcss.css'

最后测试页面是否能正常使用tailwindcss

<div class="p-3 bg-green-500 text-white">Hello Tailwind CSS</div>

如果正常显示则已经配置成功