从零开始学Tailwind CSS : 颜色配置原理与实践
Tailwind CSS 是一个功能类优先的 CSS 框架，它通过预定义的工具类来构建用户界面，而无需编写传统的 CSS 代码。其中颜色配置是其核心功能之一，理解其配置原理有助于高效使用该框架。
视频讲解:
【手把手教你】Tailwind CSS 颜色配置原理与实践
颜色配置的基本原理
Tailwind CSS 的颜色配置基于两个核心概念：
- 颜色映射表：Tailwind 维护了一个颜色名称到实际颜色值的映射表，例如
red-500对应#ef4444。 - 工具类生成：基于颜色映射表，Tailwind 自动生成如
bg-red-500、text-red-500等工具类。
当你配置自定义颜色时，实际上是在扩展或修改这个映射表，让 Tailwind 生成对应的工具类。
最简单的配置步骤示例
下面通过一个极简示例来说明如何配置和使用自定义颜色：
步骤 1：创建基本 HTML 文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tailwind Color Demo</title><script src="https://cdn.tailwindcss.com"></script>
</head>
<body><div class="bg-primary text-white p-4">This should be in our custom color!</div>
</body>
</html>
此时页面会报错，因为我们还没有定义 primary 颜色。
步骤 2：配置自定义颜色
在 <script> 标签中添加 Tailwind 配置：
<script>tailwind.config = {theme: {extend: {colors: {primary: '#3B82F6', // 蓝色作为主色调},}}}
</script>
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tailwind Color Demo</title><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {theme: {extend: {colors: {primary: '#3B82F6', // 蓝色作为主色调},}}}</script>
</head>
<body><div class="bg-primary text-white p-4">This should be in our custom color!</div>
</body>
</html>
此时刷新页面，背景将显示为我们配置的蓝色。
进阶：使用颜色渐变和多色调
Tailwind 支持为颜色定义多个色调，例如：
tailwind.config = {theme: {extend: {colors: {primary: {100: '#DBEAFE',200: '#BFDBFE',300: '#93C5FD',400: '#60A5FA',500: '#3B82F6', // 主色调600: '#2563EB',700: '#1D4ED8',800: '#1E40AF',900: '#1E3A8A',}}}}
}
使用时可以指定具体色调：
<div class="bg-primary-500 text-white p-4">主色调背景</div>
<div class="bg-primary-100 text-primary-800 p-4">浅色调背景</div>
原理总结
- 配置映射：通过
tailwind.config扩展颜色映射表 - 工具类生成：Tailwind 根据映射表生成对应的工具类（如
bg-primary） - 直接使用：在 HTML 中通过类名引用这些颜色
通过这种方式，Tailwind 让颜色管理变得统一且高效，避免了在大型项目中颜色值不一致的问题。