Tailwind CSS 自定义颜色或字体必须在 theme.extend 下添加，如 extend: { colors: { brand: { 500: '#0ea5e9' } }, fontFamily: { heading: ['"Clash Display"', 'sans-serif'] } }，以避免覆盖默认主题导致 bg-blue-500 等基础类失效；自定义项需使用官方认可的 key 名，且结构为对象，修改后须重启开发服务器。
tailwind.config.js 里怎么加自定义颜色或字体
直接在 theme.extend 下添加，不是改 theme.colors 根对象——改根对象会覆盖默认色板，导致 bg-blue-500 这类基础工具类失效。
比如想加一个叫 brand 的主色，同时保留所有默认色：
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
700: '#0284c7',
}
},
fontFamily: {
sans: ['Inter', 'system-ui'],
heading: ['Clash Display', 'sans-serif']
}
}
}
}
-
extend是安全扩展区，Tailwind 会把这里的内容合并进默认主题，不会丢默认值 - 颜色嵌套层级必须是对象（如
brand: { 500: '#' }），不能写成brand: '#0ea5e9'，否则text-brand无法生成，只有text-brand-500有效 - 字体名含空格或特殊字符时，务必用引号包裹，否则 PostCSS 解析报错：
font-family: Clash Display→'Clash Display'
怎么让自定义 class 支持响应式前缀（如 sm:text-brand-500）
Tailwind 默认只对内置工具类（text-*、bg-* 等）启用响应式变体。自定义颜色、间距、字体等只要加在 extend 里，就自动获得完整响应式支持——无需额外配置。
但注意：这个“自动”只适用于被 Tailwind 内置解析器识别的 key，比如 colors、spacing、fontSize、fontFamily。如果你加了个新 key 如 myShadows，它不会自动产出 shadow-my-sm 工具类。
立即学习“前端免费学习笔记（深入）”；
- 确保自定义项用的是 Tailwind 官方认可的 theme key 名（见 默认主题文档）
- 加完配置后必须重启 dev server（
npm run dev或pnpm dev），热更新不触发 config 重载 - 响应式类生效的前提是对应断点已启用，检查
module.exports = { ... presets: [require('@tailwindcss/typography')] }不会意外覆盖variants配置（v3+ 已移除variants，全靠corePlugins控制）
为什么新增的 spacing 值没生成对应的 padding/margin 工具类
因为 spacing 必须作为顶层 key 出现在 extend 中，且值必须是对象结构，例如 { '13': '3.25rem' }。如果错写成数组、字符串或漏掉 extend 层级，Tailwind 就忽略它。
常见错误写法：
// ❌ 错误：写在 theme 根下，不是 extend 里
theme: {
spacing: { '13': '3.25rem' } // → 不生效
}
// ✅ 正确：必须进 extend
theme: {
extend: {
spacing: { '13': '3.25rem' }
}
}
- 数值键名推荐用字符串（
'13'），避免数字键被 JS 自动转义或排序异常 - 单位建议统一用
rem或px，混用（如'13': '3.25rem'和'14': '56px'）虽不报错，但维护困难 - 新增
spacing后，p-13、mx-13、gap-13全部可用，无需单独声明
tailwind.config.js 修改后样式不更新？检查这三处
不是代码写错了，大概率是缓存或加载链路卡住了。
- PostCSS 插件未正确读取 config：确认
postcss.config.js里有require('tailwindcss')，且路径没拼错；Vite 用户还要检查vite.config.js中是否遗漏css.postcss.options.config - IDE 缓存了旧的 class 提示：VS Code 的 Tailwind CSS IntelliSense 插件有时不实时监听 config 变更，手动按
Ctrl+Shift+P→ “Tailwind CSS: Reload Server” - 构建产物残留：尤其用
next build或astro build后改 config，必须清掉.next/dist/.astro目录再重编译，否则旧 CSS 文件照常输出
最隐蔽的一点：如果你用的是 pnpm + workspace，而 tailwind.config.js 在子包里，确保该子包的 node_modules 下确实装了 tailwindcss，而不是只在根装——否则 config 被忽略，连 warning 都不抛。
