Tailwind CSS 背景颜色

Tailwind CSS 背景颜色学习笔记（详细版）

一、基础用法

Tailwind 使用bg-{color}-{shade}模式设置背景颜色：

<divclass="bg-blue-500">蓝色背景</div><divclass="bg-red-100">浅红色背景</div><divclass="bg-gray-900">深灰色背景</div>

二、完整调色板

2.1 灰度系列

2.2 彩色系列（以 blue 为例，其他色系结构相同）

2.3 全部色系一览

2.4 灰度变体（v3.3+）

Tailwind v3.3 新增三种灰度变体，色调更冷/暖/中性：

三、透明度修饰

3.1 斜杠语法

<!-- 格式：bg-{color}-{shade}/{opacity} --><divclass="bg-blue-500/50">50% 透明度蓝色</div><divclass="bg-black/25">25% 透明度黑色</div><divclass="bg-white/80">80% 透明度白色</div>

3.2 常用透明度值

3.3 任意值透明度

<divclass="bg-blue-500/[0.15]">15% 透明度</div><divclass="bg-red-500/[67%]">67% 透明度</div>

四、任意颜色值

4.1 十六进制

<divclass="bg-[#1da1f2]">Twitter 蓝</div><divclass="bg-[#24292e]">GitHub 深灰</div>

4.2 RGB / HSL

<divclass="bg-[rgb(29,161,242)]">RGB 值</div><divclass="bg-[hsl(200,100%,50%)]">HSL 值</div>

4.3 带透明度的任意值

<divclass="bg-[#1da1f2]/50">50% 透明度自定义色</div><divclass="bg-[rgb(29,161,242,0.5)]">RGBA 值</div>

五、自定义调色板

在tailwind.config.js中扩展或覆盖：

module.exports={theme:{// 完全覆盖默认调色板colors:{primary:{50:'#eff6ff',100:'#dbeafe',200:'#bfdbfe',300:'#93c5fd',400:'#60a5fa',500:'#3b82f6',600:'#2563eb',700:'#1d4ed8',800:'#1e40af',900:'#1e3a8a',},brand:'#1da1f2',// 单值颜色},// 或使用 extend 保留默认色extend:{colors:{primary:{/* ... */},}}}}

<buttonclass="bg-primary-500 hover:bg-primary-600">主色按钮</button><divclass="bg-brand">品牌色</div>

六、渐变背景

6.1 基础渐变方向

6.2 渐变色标

<!-- 两色渐变 --><divclass="bg-gradient-to-r from-blue-500 to-purple-500">蓝→紫</div><!-- 三色渐变 --><divclass="bg-gradient-to-r from-blue-500 via-green-400 to-yellow-300">蓝→绿→黄</div><!-- 带透明度 --><divclass="bg-gradient-to-r from-blue-500/50 to-purple-500/50">半透明渐变</div>

6.3 渐变实战模式

<!-- 英雄区渐变 --><sectionclass="bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500"><h1class="text-white">渐变英雄区</h1></section><!-- 卡片悬停渐变 --><divclass="hover:bg-gradient-to-r hover:from-blue-500 hover:to-cyan-500 transition-all">悬停渐变</div><!-- 文字渐变（需配合 clip） --><h1class="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">渐变文字</h1>

6.4 任意渐变值

<!-- 自定义角度 --><divclass="bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]">135度渐变</div><!-- 径向渐变 --><divclass="bg-[radial-gradient(circle_at_top_left,#667eea,#764ba2)]">径向渐变</div>

七、背景图片

7.1 背景图基础

<divclass="bg-[url('/hero.jpg')] bg-cover bg-center bg-no-repeat">背景图片</div>

7.2 背景尺寸

7.3 背景位置

7.4 背景重复

7.5 背景附着

7.6 背景原点与裁剪

八、暗色模式

8.1 基础切换

<divclass="bg-white dark:bg-gray-900"><pclass="text-gray-900 dark:text-white">自动适配暗色模式</p></div>

8.2 完整暗色配色方案

<!-- 页面容器 --><bodyclass="bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100"><!-- 卡片 --><divclass="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"><!-- 次要区域 --><divclass="bg-gray-100 dark:bg-gray-900/50"><!-- 高亮区域 --><divclass="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">信息提示</div></div></div></body>

8.3 暗色模式灰度对照

九、状态变体

背景颜色可与所有状态修饰符组合：

<!-- 悬停 --><buttonclass="bg-blue-500 hover:bg-blue-600">悬停变色</button><!-- 聚焦 --><inputclass="bg-white focus:bg-blue-50 focus:ring-2"><!-- 激活 --><buttonclass="bg-blue-500 active:bg-blue-700">按下变色</button><!-- 禁用 --><buttonclass="bg-blue-500 disabled:bg-gray-300"disabled>禁用态</button><!-- 选中 --><optionclass="bg-white selected:bg-blue-500 selected:text-white"><!-- 暗色 + 悬停组合 --><buttonclass="bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">组合变体</button>

十、响应式背景

<!-- 移动端浅色，桌面端深色 --><sectionclass="bg-gray-100 md:bg-gray-900"><h1class="text-gray-900 md:text-white">响应式背景</h1></section><!-- 移动端纯色，桌面端渐变 --><sectionclass="bg-blue-500 lg:bg-gradient-to-r lg:from-blue-500 lg:to-purple-600">响应式渐变</section>

十一、实战模式

11.1 遮罩层

<!-- 半透明遮罩 --><divclass="relative"><imgsrc="hero.jpg"class="w-full"/><divclass="absolute inset-0 bg-black/40 flex items-center justify-center"><h1class="text-white text-4xl">叠加标题</h1></div></div>

11.2 状态标签

<spanclass="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">成功</span><spanclass="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">警告</span><spanclass="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">错误</span><spanclass="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">信息</span>

11.3 斑马纹列表

<ulclass="divide-y"><liclass="bg-white px-4 py-3">奇数行</li><liclass="bg-gray-50 px-4 py-3">偶数行</li><liclass="bg-white px-4 py-3">奇数行</li><liclass="bg-gray-50 px-4 py-3">偶数行</li></ul><!-- 或用 even/odd 伪类 --><ulclass="divide-y"><liclass="even:bg-gray-50 px-4 py-3">自动斑马纹</li></ul>

11.4 渐变文字

<h1class="text-6xl font-bold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text text-transparent">彩虹渐变文字</h1>

11.5 玻璃拟态（Glassmorphism）

<divclass="bg-white/30 backdrop-blur-lg border border-white/20 rounded-2xl shadow-lg"><pclass="text-white">毛玻璃效果</p></div>

11.6 骨架屏

<divclass="animate-pulse space-y-4"><divclass="bg-gray-300 dark:bg-gray-700 h-6 rounded w-3/4"></div><divclass="bg-gray-300 dark:bg-gray-700 h-4 rounded w-full"></div><divclass="bg-gray-300 dark:bg-gray-700 h-4 rounded w-5/6"></div></div>

速查总结