必须用 theme.extend 嵌套扩展颜色等配置，避免覆盖默认主题；@layer components 确保组件样式优先级正确；theme() 函数可安全读取静态配置值，但不支持动态键或函数式值；自定义 screen 应用像素值并验证视口宽度。
如何在 tailwind.config.js 中正确扩展（extend）而非覆盖默认主题
直接修改 theme 对象顶层属性（比如写 colors: { ... }）会完全替换 Tailwind 内置颜色系统，导致 bg-gray-100、text-blue-500 等全部失效。必须用 extend 嵌套声明：
module.exports = {
theme: {
extend: {
colors: {
brand: {
primary: '#3b82f6',
secondary: '#1e40af',
},
// 不要在这里重写 gray / blue —— 它们仍需保留
},
fontSize: {
'body-lg': '1.125rem', // 新增尺寸，不影响原有的 text-sm / text-xl
}
}
}
}
常见错误：把 extend 漏掉，或把它写在 theme 外层；结果是配置不生效，或样式批量丢失。
为什么 @layer components 比直接写 .btn-primary 更可靠
Tailwind 的类名生成顺序影响 CSS 优先级。手动写的普通 class（如 .btn-primary）可能被后续的 utility 类（比如 !bg-red-500）意外覆盖。用 @layer components 可确保它们被注入到正确的层级：
@layer components {
.btn-primary {
@apply py-2 px-4 bg-brand-primary text-white font-medium rounded hover:bg-brand-secondary transition-colors;
}
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
@layer components必须出现在@tailwind base和@tailwind utilities之间 -
@apply只能用于已存在的 utility 类组合，不能包含自定义属性（如box-shadow: 0 2px 4px rgba(0,0,0,0.1)）—— 这种得用@layer utilities - 组件类名建议保持语义化（
btn-primary），避免用位置命名（header-btn）
用 theme('spacing.4') 在 JS 中安全读取 Tailwind 配置值
当需要在 React 组件里动态控制间距（比如根据断点设置 margin），别硬编码 1rem。Tailwind 提供了运行时访问机制：
主要特性： 1、支持多种语言 BEES支持多种语言，后台添加自动生成，可为每种语言分配网站风格。 2、功能强大灵活 BEES除内置的文章、产品等模型外，还可以自定义生成其它模型，满足不同的需求 3、自定义表单系统 BEES可自定义表单系统，后台按需要生成，将生成的标签加到模板中便可使用。 4、模板制作方便 采用MVC设计模式实现了程序与模板完全分离，分别适合美工和程序员使用。 5、用户体验好 前台
import { theme } from '@emotion/react' // 或使用其他支持 theme 函数的库
const spacing4 = theme('spacing.4') // 返回 '1rem'
const borderRadiusLg = theme('borderRadius.lg') // 返回 '0.5rem'
注意：
- 该函数只在构建时静态解析，不支持传入变量（
theme(`spacing.${size}`)会失败） - 如果配置中用了函数式值（如
default: (theme) => `${theme('spacing.2')} ${theme('spacing.4')}`），theme()无法执行该函数，只会返回原始函数体字符串 - 更稳妥的方式是导出一份 JSON 化的配置（通过
resolveConfig），但仅限 Node 环境
自定义 screen 后，md: 类没生效？检查 min-width 是否冲突
在 tailwind.config.js 中新增断点后，发现 md:text-lg 不触发，大概率是因为你写了 md: '640px'，而浏览器默认媒体查询是 @media (min-width: 640px) —— 这没问题；但如果项目里已有全局 CSS 强制设了 html { font-size: 62.5% } 或 viewport 缩放异常，实际视口宽度会被缩放，导致断点错位。
验证方式：
- 打开 DevTools，在控制台运行
window.innerWidth，看是否符合预期 - 检查
是否缺失或写成width=device-width, initial-scale=1.0 - 避免在自定义 screen 中使用相对单位（如
md: '40rem'），它依赖根字号，容易漂移
真正可控的做法是统一用像素值，并在所有设备上测试最小/最大宽度临界点。
