css 工具中的 Tailwind CSS_使用 Tailwind 的自定义主题与设计系统_技术教程

必须用 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 提供了运行时访问机制：

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 缩放异常，实际视口宽度会被缩放，导致断点错位。

验证方式：