直接在 :root 修改 --primary-color 无效，因 Tailwind 工具类编译时已转为静态色值，未运行时读取变量；需在 tailwind.config.js 的 theme.extend.colors 中注册变量并正确格式化 RGB 值，且重启开发服务器。
为什么直接在 :root 里改 --primary-color 没生效
多数框架（包括 Tailwind 官方插件、@tailwindcss/forms）确实暴露了 CSS 变量（如 --tw-border-opacity、--tw-bg-opacity），但 Tailwind 工具类本身**不依赖运行时变量计算颜色或边框**——它编译时就把 bg-blue-500 转成 background-color: #3b82f6。所以你在 :root 里覆盖 --primary-color，对 bg-primary 类毫无影响，除非你手动在配置里引用了该变量。
- 真正能被 CSS 变量驱动的，是插件（如
@tailwindcss/forms）或你用theme()函数显式读取的值 - 如果你没在
tailwind.config.js里把自定义色定义为变量并绑定到theme.extend.colors，那:root改了也白改 - 浏览器 DevTools 的 Styles 面板里搜不到
--primary-color？说明这个变量压根没被框架注入，别硬覆盖
如何让 bg-brand-500 真正响应 CSS 变量
必须两步走：先在配置中把变量“注册”进主题系统，再确保生成的工具类实际使用它。否则 bg-brand-500 还是静态色值。
- 在
tailwind.config.js的theme.extend.colors里写：brand: { 500: 'rgb(var(--brand-500) / <strong>1</strong>)' }（注意斜杠后是数字，不是%） - 同时在 HTML 或
:root中定义：--brand-500: 59, 130, 246（纯数字，无单位、无括号） - 透明度要靠
/ 0.8这种语法，不是rgba()—— Tailwind 的 color parser 只认这种格式 - 改完必须重启开发服务器，热更新不重载 config
@layer base 里怎么安全覆盖插件的 focus 样式
@tailwindcss/forms 默认给 input:focus 加了 ring-blue-500，想换成品牌色？不能只写 input:focus { border-color: #0ea5e9; } —— 它会被插件的 ring 覆盖，且优先级不够。
- 必须用
@layer base，且放在@tailwind base之后、@tailwind components之前 - 选择器要足够具体：
input[type="text"]:focus, input[type="email"]:focus比input:focus更容易压过插件默认规则 - 禁用 ring 并显式设 border：
@apply border-2 border-brand-500 ring-0，ring-0是关键，否则ring和border会共存打架 - 避免写
!important——@layer base+ 具体选择器 +ring-0已足够压制
为什么 @apply 在 @layer 里有时失效
@apply 不是万能胶，它只在特定上下文有效，尤其和 @layer 组合时容易静默失败。
立即学习“前端免费学习笔记（深入）”；
-
@apply只能调用已存在于当前@layer或更早层（如utilities）的工具类；在@layer base里@apply bg-brand-500会报错，除非bg-brand-500是在@layer utilities或默认 utilities 层生成的 -
@layer utilities块必须写在@tailwind utilities之前，否则你的自定义工具类会被 Tailwind 官方工具类覆盖 - 伪类不能链式写：
@apply hover:bg-blue-500 focus:ring-2无效，得拆成两个独立规则 - 如果用了
theme('colors.brand.DEFAULT')却返回undefined，检查是否漏写了DEFAULT键，或颜色没定义在extend.colors.brand下
