Tailwind CSS 颜色速查表

点击颜色可快速复制 HEX 或 RGB 值

{{ selectedColor }}-{{ shade }}

HEX {{ hex.toUpperCase() }}

RGB {{ hexToRgb(hex) }}

已复制: {{ copiedText }}

Tailwind CSS 颜色类常见问题（FAQ）

1. Tailwind CSS 的颜色类有哪些？

Tailwind 提供文本色（text-*）、背景色（bg-*）、边框色（border-*）以及渐变相关类，每个颜色都有多个色阶，例如 blue-100 到 blue-900。

2. HEX 与 RGB 值如何对应？

Tailwind 官方每个颜色类都对应一个固定 HEX 和 RGB 值，例如 bg-blue-500 对应 HEX #3B82F6，RGB (59, 130, 246)，方便开发者精确使用颜色。

3. 如何使用背景颜色类？

使用 bg-* 类设置背景颜色，如 bg-red-200、bg-green-500，可组合其他类快速美化元素。

4. 如何使用文本颜色类？

使用 text-* 类设置文本颜色，如 text-gray-700、text-blue-600，方便快速控制文字样式。

5. 边框颜色如何使用？

使用 border-* 类控制边框颜色，例如 border-red-500、border-gray-300，可以快速设置边框样式。

6. Tailwind 是否支持渐变颜色？

是的，使用 bg-gradient-to-* 类配合 from-*、via-*、to-* 类设置线性渐变背景，如 bg-gradient-to-r from-blue-500 to-purple-600。

7. Tailwind 提供多少种颜色？

Tailwind 默认提供灰色、红、橙、黄、绿、青、蓝、紫、粉等多种颜色，每种颜色通常有 9 个色阶，从 50 到 900。

8. HEX 和 RGB 可以直接使用吗？

可以。Tailwind 颜色类会生成对应的 CSS 代码，开发者也可以在自定义样式中直接使用 HEX 或 RGB 值。

9. Tailwind 是否支持透明颜色？

是的，使用 bg-opacity-*、text-opacity-*、border-opacity-* 类控制颜色透明度，例如 bg-blue-500/50 设置 50% 透明度。

10. 如何在响应式下使用颜色类？

可以使用响应式前缀，如 sm:bg-red-500、md:text-blue-600、lg:border-gray-300，在不同屏幕尺寸应用不同颜色。

11. hover 和 focus 状态如何改变颜色？

使用状态前缀如 hover:text-red-500、focus:bg-green-200，可在用户交互时改变元素颜色。

12. Tailwind 是否支持自定义颜色？

可以在 tailwind.config.js 中扩展 colors 配置，添加自定义 HEX 或 RGB 颜色，并生成对应的类名。

13. Tailwind CSS 颜色类适合做主题吗？

适合，通过组合 text-、bg-、border- 等类可以快速构建一致的主题颜色方案，也支持深色模式 dark: 前缀。

14. 如何查看颜色的 HEX 和 RGB 对照？

可以参考 Tailwind 官方文档或颜色速查表页面，每个类都列出了对应 HEX 和 RGB 值，方便开发者使用。

15. Tailwind 是否提供灰度和中性色？

是的，gray-* 系列提供多种灰度，从 gray-50 到 gray-900，用于背景、文本、边框等多种用途。

16. Tailwind 颜色类可以与自定义类组合吗？

可以，Tailwind 的原子化设计允许颜色类与尺寸、排版、布局类自由组合，快速构建元素样式。

17. 如何给背景添加渐变透明效果？

结合 bg-gradient-to-* 和 from-*/to-* 以及透明度类（/50、/75）可以实现渐变半透明背景。

18. Tailwind 颜色类适合新手吗？

非常适合新手，使用颜色类无需写自定义 CSS，快速理解颜色应用，同时可以直接复制类名使用。

19. Tailwind 是否支持渐变文本颜色？

是的，使用 bg-clip-text + text-transparent 配合渐变背景类即可实现文本渐变效果，如 bg-gradient-to-r from-blue-500 to-purple-600。

20. Tailwind CSS 颜色类的优势是什么？

颜色类原子化、可组合，覆盖文本、背景、边框、渐变、透明度等，便于快速开发和统一设计风格，同时易于响应式和状态控制。