Vue 项目中配置 Tialwind CSS 详解

安装 Tailwind CSS

npm install tailwindcss

创建 TailwindCSS 配置文件

npx tailwindcss init

这一步骤会自动在根目录下创建tailwind.config.js。
内容修改为

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

安装 PostCSS 和 autoprefixer

由于 Tailwind 不会自动添加浏览器引擎专属前缀到生成的 CSS 中，建议安装 autoprefixer 去处理这个问题。

npm install -D postcss autoprefixer

创建 PostCSS 配置文件

我们在项目根目录下手动创建postcss.config.js。
内容如下

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

引入 TailwindCSS

手动创建tailwind.css，存放到哪里都可以，我的是Vuetify项目，所以我粗放到src/styles下。
内容如下：

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

然后在 src/main.js 文件中引入。

/**
 * main.js
 *
 * Bootstraps Vuetify and other plugins then mounts the App`
 */

// Components
import App from './App.vue'
import '@/styles/tailwind.scss'

// Composables
import { createApp } from 'vue'

// Plugins
import { registerPlugins } from '@/plugins'

const app = createApp(App)

registerPlugins(app)

app.mount('#app')