starwait/docs/02-使用tailwindcss.md

安装 Tailwind CSS 及其依赖

npm install -D tailwindcss postcss autoprefixer @nuxtjs/tailwindcss

初始化 Tailwind 配置文件

npx tailwindcss init

配置 tailwind.config.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 文件中添加：

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

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

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

添加自定义样式

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

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

使用 @apply 指令（在 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;
}