Tailwind CSS 颜色系统

建立一致的颜色层级

为不同UI元素确定一致的颜色使用规则，确保视觉层次清晰：

• 主要内容使用高对比度颜色（如 text-gray-900）
• 次要内容使用中等对比度颜色（如 text-gray-600）
• 说明性内容使用低对比度颜色（如 text-gray-400）

为交互元素选择合适的颜色

交互元素的颜色应当直观且一致：

创建一致的颜色主题

选择主色调和辅助色调，保持整个应用的一致性：

颜色可访问性考虑

确保颜色对比度符合WCAG标准，提高可访问性：

使用 Tailwind 配置自定义颜色

在 tailwind.config.js 中定义品牌专属颜色：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#bfdbfe',  // blue-200 
          DEFAULT: '#3b82f6', // blue-500
          dark: '#1e40af',   // blue-800
        },
        secondary: '#f59e0b', // amber-500
      }
    }
  }
}

然后使用：bg-primary,text-primary-dark 等类名。