Tailwind CSS 背景颜色学习笔记详细版一、基础用法Tailwind 使用bg-{color}-{shade}模式设置背景颜色divclassbg-blue-500蓝色背景/divdivclassbg-red-100浅红色背景/divdivclassbg-gray-900深灰色背景/div二、完整调色板2.1 灰度系列工具类色值视觉bg-black#000000纯黑bg-gray-50#F9FAFB近白bg-gray-100#F3F4F6极浅灰bg-gray-200#E5E7EB浅灰bg-gray-300#D1D5DB灰bg-gray-400#9CA3AF中灰bg-gray-500#6B7280标准灰bg-gray-600#4B5563深灰bg-gray-700#374151较深灰bg-gray-800#1F2937很深灰bg-gray-900#111827近黑bg-white#FFFFFF纯白2.2 彩色系列以 blue 为例其他色系结构相同Shade色值用途bg-blue-50#EFF6FF极浅背景bg-blue-100#DBEAFE浅色背景/悬停态bg-blue-200#BFDBFE浅色强调bg-blue-300#93C5FD柔和强调bg-blue-400#60A5FA中等强调bg-blue-500#3B82F6标准色主色bg-blue-600#2563EB深色主色/悬停态bg-blue-700#1D4ED8按钮激活态bg-blue-800#1E40AF深色强调bg-blue-900#1E3A8A极深背景2.3 全部色系一览色系类名前缀色调红色bg-red-*错误、危险、删除橙色bg-orange-*警告、提醒琥珀色bg-amber-*警告、注意黄色bg-yellow-*提示、高亮酸橙bg-lime-*新鲜、活力绿色bg-green-*成功、通过翡翠bg-emerald-*成功、确认青绿bg-teal-*信息、辅助青色bg-cyan-*信息、科技天蓝bg-sky-*信息、链接蓝色bg-blue-*主色、信息靛蓝bg-indigo-*主色、品牌紫色bg-violet-*创意、高级紫红bg-purple-*创意、特殊品红bg-fuchsia-*醒目、装饰粉色bg-pink-*女性、柔和玫瑰bg-rose-*错误、强调2.4 灰度变体v3.3Tailwind v3.3 新增三种灰度变体色调更冷/暖/中性变体前缀特点Slate石板bg-slate-*偏蓝冷灰Gray标准bg-gray-*中性灰Zinc锌bg-zinc-*偏暖灰Neutral中性bg-neutral-*纯灰无色调偏移Stone石头bg-stone-*偏暖棕灰三、透明度修饰3.1 斜杠语法!-- 格式bg-{color}-{shade}/{opacity} --divclassbg-blue-500/5050% 透明度蓝色/divdivclassbg-black/2525% 透明度黑色/divdivclassbg-white/8080% 透明度白色/div3.2 常用透明度值修饰值透明度典型用途/55%极淡背景/1010%浅色遮罩/2020%轻遮罩/2525%模态遮罩/5050%半透明背景/7575%深遮罩/9090%接近不透明/100100%完全不透明3.3 任意值透明度divclassbg-blue-500/[0.15]15% 透明度/divdivclassbg-red-500/[67%]67% 透明度/div四、任意颜色值4.1 十六进制divclassbg-[#1da1f2]Twitter 蓝/divdivclassbg-[#24292e]GitHub 深灰/div4.2 RGB / HSLdivclassbg-[rgb(29,161,242)]RGB 值/divdivclassbg-[hsl(200,100%,50%)]HSL 值/div4.3 带透明度的任意值divclassbg-[#1da1f2]/5050% 透明度自定义色/divdivclassbg-[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:{/* ... */},}}}}buttonclassbg-primary-500 hover:bg-primary-600主色按钮/buttondivclassbg-brand品牌色/div六、渐变背景6.1 基础渐变方向工具类CSS效果bg-gradient-to-tto top从下到上bg-gradient-to-trto top right到右上bg-gradient-to-rto right从左到右bg-gradient-to-brto bottom right到右下bg-gradient-to-bto bottom从上到下bg-gradient-to-lto left从右到左6.2 渐变色标工具类位置from-{color}起始色0%via-{color}中间色50%to-{color}结束色100%!-- 两色渐变 --divclassbg-gradient-to-r from-blue-500 to-purple-500蓝→紫/div!-- 三色渐变 --divclassbg-gradient-to-r from-blue-500 via-green-400 to-yellow-300蓝→绿→黄/div!-- 带透明度 --divclassbg-gradient-to-r from-blue-500/50 to-purple-500/50半透明渐变/div6.3 渐变实战模式!-- 英雄区渐变 --sectionclassbg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500h1classtext-white渐变英雄区/h1/section!-- 卡片悬停渐变 --divclasshover:bg-gradient-to-r hover:from-blue-500 hover:to-cyan-500 transition-all悬停渐变/div!-- 文字渐变需配合 clip --h1classbg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent渐变文字/h16.4 任意渐变值!-- 自定义角度 --divclassbg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)]135度渐变/div!-- 径向渐变 --divclassbg-[radial-gradient(circle_at_top_left,#667eea,#764ba2)]径向渐变/div七、背景图片7.1 背景图基础divclassbg-[url(/hero.jpg)] bg-cover bg-center bg-no-repeat背景图片/div7.2 背景尺寸工具类CSS说明bg-autobackground-size: auto原始尺寸bg-coverbackground-size: cover覆盖容器常用bg-containbackground-size: contain完整显示7.3 背景位置工具类CSSbg-bottombackground-position: bottombg-centerbackground-position: centerbg-leftbackground-position: leftbg-rightbackground-position: rightbg-topbackground-position: topbg-left-topbackground-position: left topbg-right-bottombackground-position: right bottom7.4 背景重复工具类CSSbg-repeatbackground-repeat: repeatbg-no-repeatbackground-repeat: no-repeatbg-repeat-xbackground-repeat: repeat-xbg-repeat-ybackground-repeat: repeat-ybg-repeat-roundbackground-repeat: roundbg-repeat-spacebackground-repeat: space7.5 背景附着工具类CSS效果bg-fixedbackground-attachment: fixed视差滚动bg-localbackground-attachment: local随内容滚动bg-scrollbackground-attachment: scroll随页面滚动7.6 背景原点与裁剪工具类CSSbg-origin-borderbackground-origin: border-boxbg-origin-paddingbackground-origin: padding-boxbg-origin-contentbackground-origin: content-boxbg-clip-borderbackground-clip: border-boxbg-clip-paddingbackground-clip: padding-boxbg-clip-contentbackground-clip: content-boxbg-clip-textbackground-clip: text八、暗色模式8.1 基础切换divclassbg-white dark:bg-gray-900pclasstext-gray-900 dark:text-white自动适配暗色模式/p/div8.2 完整暗色配色方案!-- 页面容器 --bodyclassbg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100!-- 卡片 --divclassbg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700!-- 次要区域 --divclassbg-gray-100 dark:bg-gray-900/50!-- 高亮区域 --divclassbg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800信息提示/div/div/div/body8.3 暗色模式灰度对照层级亮色暗色页面背景bg-whitedark:bg-gray-900卡片背景bg-whitedark:bg-gray-800嵌套背景bg-gray-50dark:bg-gray-700/50悬停背景hover:bg-gray-100dark:hover:bg-gray-700输入框背景bg-whitedark:bg-gray-800遮罩层bg-black/50bg-black/70九、状态变体背景颜色可与所有状态修饰符组合!-- 悬停 --buttonclassbg-blue-500 hover:bg-blue-600悬停变色/button!-- 聚焦 --inputclassbg-white focus:bg-blue-50 focus:ring-2!-- 激活 --buttonclassbg-blue-500 active:bg-blue-700按下变色/button!-- 禁用 --buttonclassbg-blue-500 disabled:bg-gray-300disabled禁用态/button!-- 选中 --optionclassbg-white selected:bg-blue-500 selected:text-white!-- 暗色 悬停组合 --buttonclassbg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700组合变体/button十、响应式背景!-- 移动端浅色桌面端深色 --sectionclassbg-gray-100 md:bg-gray-900h1classtext-gray-900 md:text-white响应式背景/h1/section!-- 移动端纯色桌面端渐变 --sectionclassbg-blue-500 lg:bg-gradient-to-r lg:from-blue-500 lg:to-purple-600响应式渐变/section十一、实战模式11.1 遮罩层!-- 半透明遮罩 --divclassrelativeimgsrchero.jpgclassw-full/divclassabsolute inset-0 bg-black/40 flex items-center justify-centerh1classtext-white text-4xl叠加标题/h1/div/div11.2 状态标签spanclassbg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded成功/spanspanclassbg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded警告/spanspanclassbg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded错误/spanspanclassbg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded信息/span11.3 斑马纹列表ulclassdivide-yliclassbg-white px-4 py-3奇数行/liliclassbg-gray-50 px-4 py-3偶数行/liliclassbg-white px-4 py-3奇数行/liliclassbg-gray-50 px-4 py-3偶数行/li/ul!-- 或用 even/odd 伪类 --ulclassdivide-yliclasseven:bg-gray-50 px-4 py-3自动斑马纹/li/ul11.4 渐变文字h1classtext-6xl font-bold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text text-transparent彩虹渐变文字/h111.5 玻璃拟态Glassmorphismdivclassbg-white/30 backdrop-blur-lg border border-white/20 rounded-2xl shadow-lgpclasstext-white毛玻璃效果/p/div11.6 骨架屏divclassanimate-pulse space-y-4divclassbg-gray-300 dark:bg-gray-700 h-6 rounded w-3/4/divdivclassbg-gray-300 dark:bg-gray-700 h-4 rounded w-full/divdivclassbg-gray-300 dark:bg-gray-700 h-4 rounded w-5/6/div/div速查总结功能核心类示例纯色背景bg-{color}-{shade}bg-blue-500透明度bg-{color}/{opacity}bg-black/50任意色值bg-[{value}]bg-[#1da1f2]渐变方向bg-gradient-to-{dir}bg-gradient-to-r渐变色标from-/via-/to-from-blue-500 to-purple-500渐变文字bg-clip-text text-transparent配合渐变使用背景图bg-[url(...)]bg-[url(/img.jpg)]背景尺寸bg-cover/bg-contain配合背景图背景位置bg-center/bg-top配合背景图暗色模式dark:bg-{color}dark:bg-gray-900状态变体hover:/focus:/active:hover:bg-blue-600响应式sm:/md:/lg:md:bg-gray-100