附录 A：Tailwind 全类名一览表

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,vue,html}',
    './index.html',
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          900: '#1e3a8a',
        },
        surface: {
          DEFAULT: '#ffffff',
          elevated: '#fafafa',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      fontSize: {
        '2xs': ['0.625rem', { lineHeight: '0.875rem' }],
      },
      spacing: {
        4.5: '1.125rem',
        13: '3.25rem',
      },
      borderRadius: {
        '2xl': '1rem',
      },
      boxShadow: {
        'card': '0 4px 12px rgba(0, 0, 0, 0.08)',
        'card-hover': '0 8px 24px rgba(0, 0, 0, 0.12)',
      },
      animation: {
        'fade-in': 'fadeIn 0.3s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0', transform: 'translateY(4px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

/* src/styles/tokens.css */
:root {
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-surface: #ffffff;
  --color-text-primary: #111827;
  --radius-card: 0.75rem;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: 'var(--color-brand-500)',
          600: 'var(--color-brand-600)',
        },
        surface: 'var(--color-surface)',
        'text-primary': 'var(--color-text-primary)',
      },
      borderRadius: {
        card: 'var(--radius-card)',
      },
      boxShadow: {
        card: 'var(--shadow-card)',
      },
    },
  },
}

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

/* tokens.css */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
}

.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --border-color: #334155;
}

<!-- HTML -->
<html class="dark">
  <body class="bg-[var(--bg-primary)] text-[var(--text-primary)]">
    <div class="border border-[var(--border-color)] rounded-lg p-4">
      <p class="text-[var(--text-secondary)]">暗色模式已开启</p>
    </div>
  </body>
</html>

// theme.ts
const THEME_KEY = 'app-theme'

type Theme = 'light' | 'dark' | 'system'

export function getTheme(): Theme {
  return (localStorage.getItem(THEME_KEY) as Theme) || 'system'
}

export function setTheme(theme: Theme) {
  const root = document.documentElement
  if (theme === 'dark') {
    root.classList.add('dark')
  } else if (theme === 'light') {
    root.classList.remove('dark')
  } else {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    prefersDark ? root.classList.add('dark') : root.classList.remove('dark')
  }
  localStorage.setItem(THEME_KEY, theme)
}

// 初始化
setTheme(getTheme())

// 监听系统变化
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', () => {
    if (getTheme() === 'system') setTheme('system')
  })

/* src/styles/components.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors;
  }

  .btn-primary {
    @apply btn bg-brand-500 text-white hover:bg-brand-600 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2;
  }

  .btn-secondary {
    @apply btn bg-white text-gray-700 border border-gray-300 hover:bg-gray-50;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700;
  }
}

@layer components {
  .card {
    @apply rounded-xl border bg-white shadow-sm transition-shadow;
  }

  .card-hover:hover {
    @apply shadow-md;
  }

  .card-header {
    @apply flex flex-col space-y-1.5 p-6 border-b;
  }

  .card-title {
    @apply text-lg font-semibold leading-none tracking-tight;
  }

  .card-body {
    @apply p-6;
  }

  .card-footer {
    @apply flex items-center justify-end gap-2 p-6 border-t;
  }
}

@layer components {
  .modal-overlay {
    @apply fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity;
  }

  .modal-content {
    @apply fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border bg-white p-6 shadow-lg outline-none;
  }

  .modal-header {
    @apply space-y-1.5 mb-4;
  }

  .modal-title {
    @apply text-lg font-semibold leading-none tracking-tight;
  }

  .modal-footer {
    @apply mt-6 flex items-center justify-end gap-2;
  }
}

<!-- 使用示例 -->
<div class="modal-overlay"></div>
<div class="modal-content" role="dialog">
  <div class="modal-header">
    <h2 class="modal-title">确认删除</h2>
    <p class="text-sm text-gray-500">此操作不可撤销，请谨慎。</p>
  </div>
  <div class="modal-footer">
    <button class="btn-secondary">取消</button>
    <button class="btn-danger">确认删除</button>
  </div>
</div>

<article class="prose prose-slate md:prose-lg dark:prose-invert">
  <!-- 这里的 HTML/Markdown 渲染结果会自动排版 -->
  <h1>文章标题</h1>
  <p>正文段落……</p>
  <blockquote>引用内容</blockquote>
</article>

// tailwind.config.js
module.exports = {
  plugins: [require('@tailwindcss/typography')],
}

// tailwind.config.js
module.exports = {
  plugins: [require('@tailwindcss/forms')],
}

<input type="text" class="form-input rounded-lg border-gray-300" />
<select class="form-select rounded-lg border-gray-300"></select>
<textarea class="form-textarea rounded-lg border-gray-300"></textarea>

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3 gap-4">
    <div class="card">Item 1</div>
    <div class="card">Item 2</div>
    <div class="card">Item 3</div>
  </div>
</div>

<p class="line-clamp-3">
  这是一段很长的文本，超过三行后尾部会自动显示省略号，无需手动计算高度或使用 JavaScript。
</p>

/* styles.css —— Tailwind v4 */
@import "tailwindcss";

@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;

  --font-sans: 'Inter', system-ui, sans-serif;
  --radius-card: 0.75rem;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@import "tailwindcss";

@theme {
  --color-surface: #ffffff;
  --color-surface-dark: #0f172a;
}

.dark {
  --color-surface: var(--color-surface-dark);
}

@import "tailwindcss";

@utility btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-weight: 500;
}