🎨 Tailwind 优雅配色类测试 / Tailwind Elegant Color Classes Test

使用新的优雅 Tailwind 颜色类 / Using new elegant Tailwind color classes

Tailwind 优雅配色类示例 / Tailwind Elegant Color Classes Examples

YInMn Blue Classes

bg-yinmn-blue-100
bg-yinmn-blue-200
bg-yinmn-blue-300
bg-yinmn-blue-400
bg-yinmn-blue-500
bg-yinmn-blue-600
bg-yinmn-blue-700
bg-yinmn-blue-800
bg-yinmn-blue-900

Chinese Violet Classes

bg-chinese-violet-100
bg-chinese-violet-200
bg-chinese-violet-300
bg-chinese-violet-400
bg-chinese-violet-500
bg-chinese-violet-600
bg-chinese-violet-700
bg-chinese-violet-800
bg-chinese-violet-900

China Rose Classes

bg-china-rose-100
bg-china-rose-200
bg-china-rose-300
bg-china-rose-400
bg-china-rose-500
bg-china-rose-600
bg-china-rose-700
bg-china-rose-800
bg-china-rose-900

Light Coral Classes

bg-light-coral-100
bg-light-coral-200
bg-light-coral-300
bg-light-coral-400
bg-light-coral-500
bg-light-coral-600
bg-light-coral-700
bg-light-coral-800
bg-light-coral-900

Buff Classes

bg-buff-100
bg-buff-200
bg-buff-300
bg-buff-400
bg-buff-500
bg-buff-600
bg-buff-700
bg-buff-800
bg-buff-900

Text Color Classes

text-yinmn-blue-500
text-chinese-violet-500
text-china-rose-500
text-light-coral-500
text-buff-500

实际应用示例 / Practical Application Examples

渐变卡片 / Gradient Card

使用 from-yinmn-blue-500 to-chinese-violet-500 创建渐变背景

⚠️

重要提醒 / Important Notice

使用 bg-light-coral-100 和 border-light-coral-500 创建警告样式

✅

成功消息 / Success Message

使用 bg-chinese-violet-100 和 border-chinese-violet-500 创建成功样式

ℹ️

信息提示 / Information

使用 bg-yinmn-blue-100 和 border-yinmn-blue-500 创建信息样式

使用方法 / Usage Guide

Tailwind 类名 / Tailwind Class Names

背景色 / Background Colors:

  • • bg-yinmn-blue-500
  • • bg-chinese-violet-500
  • • bg-china-rose-500
  • • bg-light-coral-500
  • • bg-buff-500

文字色 / Text Colors:

  • • text-yinmn-blue-500
  • • text-chinese-violet-500
  • • text-china-rose-500
  • • text-light-coral-500
  • • text-buff-500

渐变背景 / Gradient Backgrounds

• bg-gradient-to-r from-yinmn-blue-500 to-chinese-violet-500

• bg-gradient-to-br from-yinmn-blue-400 via-chinese-violet-500 to-china-rose-400

• bg-gradient-to-l from-light-coral-500 to-buff-500

悬停效果 / Hover Effects

• hover:bg-yinmn-blue-600

• hover:text-buff-400

• hover:border-light-coral-600