Tailwind CSS 颜色 #

50 → 100 → 200 → 300 → 400 → 500 → 600 → 700 → 800 → 900 → 950
浅 ←────────────────────────────────────────────────────→ 深

<p class="text-gray-900">深灰色文本</p>
<p class="text-gray-500">中灰色文本</p>
<p class="text-gray-400">浅灰色文本</p>
<p class="text-blue-500">蓝色文本</p>
<p class="text-red-500">红色文本</p>

<div class="bg-white">白色背景</div>
<div class="bg-gray-100">浅灰背景</div>
<div class="bg-blue-500">蓝色背景</div>
<div class="bg-red-500">红色背景</div>

<div class="border border-gray-300">灰色边框</div>
<div class="border-2 border-blue-500">蓝色边框</div>
<div class="border-b-4 border-red-500">红色底边框</div>

<p class="underline decoration-blue-500">蓝色下划线</p>
<div class="divide-y divide-gray-200">
  <div>项目 1</div>
  <div>项目 2</div>
</div>

<!-- 文本透明度 -->
<p class="text-blue-500/50">50% 透明度</p>
<p class="text-blue-500/75">75% 透明度</p>
<p class="text-blue-500/100">100% 不透明</p>

<!-- 背景透明度 -->
<div class="bg-blue-500/50">半透明背景</div>

<!-- 边框透明度 -->
<div class="border border-blue-500/50">半透明边框</div>

<div class="bg-blue-500/[0.25]">25% 透明度</div>
<div class="text-red-500/[0.8]">80% 透明度</div>

<div class="bg-[#1da1f2]">Twitter 蓝</div>
<div class="text-[#ff6b6b]">自定义红色</div>

<div class="bg-[rgb(59,130,246)]">RGB 颜色</div>
<div class="bg-[rgba(59,130,246,0.5)]">RGBA 颜色</div>

<div class="bg-[hsl(217,91%,60%)]">HSL 颜色</div>

<div class="bg-transparent">透明背景</div>
<div class="text-transparent">透明文本（配合 bg-clip-text）</div>

<div class="text-blue-500">
  <span class="text-current">继承父元素颜色</span>
</div>

<svg class="w-6 h-6 text-blue-500">
  <path class="fill-current" d="..." />
</svg>

<div class="bg-black">黑色背景</div>
<div class="bg-white">白色背景</div>
<div class="text-black">黑色文本</div>
<div class="text-white">白色文本</div>

<!-- 基本渐变 -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  从左到右渐变
</div>

<!-- 三色渐变 -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  三色渐变
</div>

<div class="bg-gradient-to-t from-blue-500 to-purple-500">向上</div>
<div class="bg-gradient-to-tr from-blue-500 to-purple-500">右上</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-500">向右</div>
<div class="bg-gradient-to-br from-blue-500 to-purple-500">右下</div>
<div class="bg-gradient-to-b from-blue-500 to-purple-500">向下</div>
<div class="bg-gradient-to-bl from-blue-500 to-purple-500">左下</div>
<div class="bg-gradient-to-l from-blue-500 to-purple-500">向左</div>
<div class="bg-gradient-to-tl from-blue-500 to-purple-500">左上</div>

<!-- from-{color}：起点颜色 -->
<!-- via-{color}：中间颜色 -->
<!-- to-{color}：终点颜色 -->

<div class="bg-gradient-to-r from-cyan-500 to-blue-500">
  青蓝渐变
</div>

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500">
  黄红粉渐变
</div>

<div class="bg-gradient-to-r from-blue-500/50 to-purple-500/50">
  半透明渐变
</div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#1da1f2',
        'brand-light': '#9bd1f9',
        'brand-dark': '#0d8bd9',
      },
    },
  },
}

<div class="bg-brand">品牌色</div>
<div class="text-brand-light">浅品牌色</div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

<div class="bg-brand-500">品牌主色</div>
<div class="bg-brand-100">品牌浅色</div>
<div class="bg-brand-900">品牌深色</div>

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      white: '#ffffff',
      black: '#000000',
      primary: '#3b82f6',
      secondary: '#6b7280',
      danger: '#ef4444',
    },
  },
}

// 推荐：使用语义化名称
colors: {
  'primary': '#3b82f6',
  'secondary': '#6b7280',
  'success': '#22c55e',
  'warning': '#f59e0b',
  'danger': '#ef4444',
  'info': '#0ea5e9',
}

// 不推荐：使用具体颜色名
colors: {
  'blue': '#3b82f6',
  'gray': '#6b7280',
  'green': '#22c55e',
}

<!-- 主要按钮 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  主要按钮
</button>

<!-- 次要按钮 -->
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded">
  次要按钮
</button>

<!-- 危险按钮 -->
<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">
  删除
</button>

<!-- 轮廓按钮 -->
<button class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded">
  轮廓按钮
</button>

<span class="px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-full">
  成功
</span>

<span class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-100 rounded-full">
  警告
</span>

<span class="px-2 py-1 text-xs font-medium text-red-700 bg-red-100 rounded-full">
  错误
</span>

<span class="px-2 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full">
  信息
</span>

<!-- 渐变按钮 -->
<button class="bg-gradient-to-r from-pink-500 to-purple-500 text-white px-6 py-2 rounded-full">
  渐变按钮
</button>

<!-- 渐变卡片 -->
<div class="bg-gradient-to-br from-purple-500 to-pink-500 p-6 rounded-lg text-white">
  <h3 class="text-xl font-bold">渐变卡片</h3>
  <p class="mt-2">漂亮的渐变背景</p>
</div>

<!-- 页面背景 -->
<div class="min-h-screen bg-gradient-to-b from-gray-900 to-gray-700">
  内容
</div>

<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-900 dark:text-white">暗色模式适配</p>
</div>