在 Tailwind CSS 中扩展自定义颜色需修改 tailwind.config.js 的 theme.extend.colors；可添加完整色系、复用内置色系或仅设纯色，键名需合法且修改后重启开发服务器。
html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
<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><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></pre>
</font>
<p>保存后，就能直接使用 <code>bg-myblue-500</code>、<code>text-myblue-200</code> 等类名。</p>
<H3>2. 复用已有色系结构（推荐）</H3>
<p>避免手动计算明暗值，可基于 Tailwind 内置色（如 <code>blue</code> 或 <code>indigo</code>）微调：</p>
<font face="monospace">
<pre><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></pre>
</font>
<H3>3. 添加纯色（无明暗变体）</H3>
<p>如果只需要一个固定色（比如强调红 <code>#ef4444</code>），直接赋值字符串即可：</p>
<ul>
<li><code>accent: '#ef4444'</code> → 生成 <code>text-accent</code>、<code>bg-accent</code>、<code>border-accent</code></li>
<li>不支持 <code>accent-50</code> 这类变体，但够用且简洁</li>
</ul>
<H3>4. 注意事项</H3>
<ul>
<li>键名不能含空格或特殊符号（如 <code>my-blue</code> 不合法，用 <code>myblue</code> 或 <code>myBlue</code>）</li>
<li>修改配置后需重启开发服务器（如 <code>npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch</code>）</li>
<li>若使用 JIT 模式（默认），新增颜色类会按需生成，无需额外配置</li>
<li>可在 HTML 中直接测试：<code><div class="bg-myblue-500 text-white p-4">Hello</div></code></li>
</ul>
