## 安装 Tailwind CSS 及其依赖

```bash
npm install -D tailwindcss postcss autoprefixer @nuxtjs/tailwindcss
```

## 初始化 Tailwind 配置文件

```bash
npx tailwindcss init
```

## 配置 `tailwind.config.js`

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## 创建 Tailwind CSS 入口文件

在 assets/css/tailwind.css 文件中添加：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 更新 `nuxt.config.ts/nuxt.config.js`

```js
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})
```

## 添加自定义样式

在 tailwind.config.js 中扩展主题：

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#1DA1F2',
        'secondary': '#14171A',
      },
    },
  },
}
```

## 使用 @apply 指令（在 CSS 文件中）

```css
.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}
```