今天在使用tailwindcss时，发现配置在tailwind.config.js中的颜色无论如何都不生效，一查才知道4.0 配置方式改变了。
在 Tailwind CSS 4.0 中，自定义颜色的方式与之前的版本有所不同，因为 Tailwind CSS 4.0 引入了基于 CSS 的配置方式，移除了传统的 tailwind.config.js 文件的强制依赖，转而更倾向于使用 CSS 文件中的 @theme 指令来定义自定义主题，包括颜色。这种新方法利用了 CSS 自定义属性（Custom Properties），更加现代化且灵活。
以下是如何在 Tailwind CSS 4.0 中自定义颜色的步骤和示例：
1. 使用 CSS 文件中的 @theme 指令
在 Tailwind CSS 4.0 中，你可以通过在 CSS 文件中使用 @theme 指令来定义自定义颜色。这些颜色会自动生成对应的工具类（如 bg-、text- 等），并保留 Tailwind 的默认颜色。
示例代码：
/* styles.css 或其他 CSS 文件 */
@import "tailwindcss";
@theme {
--color-myblue-50: #eef2ff;
--color-myblue-100: #e0e7ff;
--color-myblue-200: #c7d2fe;
--color-myblue-300: #a5b4fc;
--color-myblue-400: #818cf8;
--color-myblue-500: #6366f1;
--color-myblue-600: #4f46e5;
--color-myblue-700: #4338ca;
--color-myblue-800: #3730a3;
--color-myblue-900: #312e81;
}
说明：
--color-是 Tailwind CSS 4.0 中用于定义颜色的命名空间。myblue是你自定义的颜色名称，可以随意命名（建议语义化）。50到900是颜色的不同深浅度（从浅到深），你可以根据需要定义部分或全部。- 定义完成后，你可以直接在 HTML 中使用这些颜色，例如：
<div class="bg-myblue-500 text-myblue-900">自定义颜色</div>
结果：
- Tailwind 会根据你定义的
--color-myblue-*生成对应的工具类，如bg-myblue-500、text-myblue-900等。 - 默认颜色（如
blue、red等）依然保留，除非你显式覆盖它们。
2. 覆盖默认颜色
如果你想完全替换 Tailwind 的默认颜色（而不是扩展），可以在 @theme 中重新定义它们。例如，替换默认的 blue 颜色：
示例代码：
@import "tailwindcss";
@theme {
--color-blue-50: #f0f9ff;
--color-blue-100: #e0f2fe;
--color-blue-200: #bae6fd;
--color-blue-300: #7dd3fc;
--color-blue-400: #38bdf8;
--color-blue-500: #0ea5e9;
--color-blue-600: #0284c7;
--color-blue-700: #0369a1;
--color-blue-800: #075985;
--color-blue-900: #0c4a6e;
}
说明：
- 这里重新定义了
--color-blue-*，覆盖了 Tailwind 默认的blue颜色。 - 使用时，仍然是
bg-blue-500、text-blue-900等，但颜色值会变成你自定义的。
3. 使用 OKLCH 或其他颜色格式
Tailwind CSS 4.0 默认使用 oklch 颜色格式（比 RGB 更现代，支持更广的色域），但你也可以使用 HEX、RGB 或 HSL 等格式。
示例代码（使用 OKLCH）：
@import "tailwindcss";
@theme {
--color-mygreen-500: oklch(0.65 0.15 150);
--color-mygreen-600: oklch(0.55 0.15 150);
}
说明：
oklch的参数分别是 lightness（亮度）、chroma（色度）、hue（色调）。- 你也可以使用 HEX：
--color-mygreen-500: #10b981;
4. 动态主题支持（使用 CSS 变量）
如果你需要支持动态主题（例如暗黑模式），可以在 @theme 中结合 CSS 变量使用：
示例代码：
@import "tailwindcss";
@theme {
--color-primary: var(--primary-color);
}
:root {
--primary-color: #6366f1; /* 默认主题 */
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #a5b4fc; /* 暗黑模式 */
}
}
说明：
--color-primary定义了一个动态颜色，它的值来自--primary-color。- 在
:root中通过 CSS 变量动态调整颜色。 - 使用时：
<div class="bg-primary">动态颜色</div>。
注意事项
- 构建工具：确保你的项目使用支持 Tailwind CSS 4.0 的构建工具（如 Vite），并正确引入
@tailwindcss。 - 颜色命名：避免与默认颜色冲突，除非你明确想覆盖它们。
- 性能：只定义你需要的颜色，避免生成过多未使用的工具类。
总结
在 Tailwind CSS 4.0 中，自定义颜色的首选方式是通过 CSS 文件中的 @theme 指令定义 --color-* 变量。这种方法简单、直观且与现代 CSS 特性深度集成。
