在 tailwind css 中扩展自定义颜色需修改 tailwind.config.js 的 theme.extend.colors；可添加完整色系、复用内置色系或仅设纯色，键名需合法且修改后重启开发服务器。
<p>在 Tailwind CSS 中扩展自定义颜色，核心是修改 <code>tailwind.config.js</code> 文件里的 <strong>theme.extend.colors</strong> 配置项。不需要重写整个 color palette，只需在 <code>extend</code> 下添加你的颜色即可，Tailwind 会自动合并并生成对应工具类（如 <code>text-myblue-500</code>、<code>bg-myblue-100</code>、<code>border-myblue-300</code> 等）。</p>
<h3>1. 基础配置：添加单个自定义色系</h3>
<p>比如你想加入品牌蓝 <code>#2563eb</code>，并按 Tailwind 的明暗层级（50–900）生成变体：</p>
<font face="monospace">
<pre class="brush:php;toolbar:false;"><code>module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors: {
myblue: {
50: "#e0f2fe",
100: "#bdf2fd",
200: "#81d7fa",
300: "#4ac7f7",
400: "#2eaaf5",
500: "#2563eb", // 主色
600: "#1d4ed8",
700: "#1e40af",
800: "#1e3a8a",
900: "#1d3354"
}
}
}
},
plugins: []
}</code>
保存后，就能直接使用 bg-myblue-500、text-myblue-200 等类名。
2. 复用已有色系结构（推荐）
避免手动计算明暗值，可基于 Tailwind 内置色（如 blue 或 indigo）微调：
<code>const colors = require('tailwindcss/colors')
module.exports = {
theme: {
extend: {
colors: {
brand: {
...colors.blue, // 继承 blue 的全部层级
DEFAULT: '#1e40af', // 设为默认色（即 bg-brand、text-brand 对应的色）
500: '#1e40af',
600: '#1e3a8a'
}
}
}
}
}</code>
3. 添加纯色（无明暗变体）
如果只需要一个固定色（比如强调红 #ef4444），直接赋值字符串即可：
-
accent: '#ef4444'→ 生成text-accent、bg-accent、border-accent - 不支持
accent-50这类变体，但够用且简洁
4. 注意事项
- 键名不能含空格或特殊符号（如
my-blue不合法，用myblue或myBlue） - 修改配置后需重启开发服务器（如
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch） - 若使用 JIT 模式（默认），新增颜色类会按需生成，无需额外配置
- 可在 HTML 中直接测试：
<div class="bg-myblue-500 text-white p-4">Hello</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
