如何在Tailwind CSS中为间距值设别名并复用默认间距？两种方案有何差异？

需求背景 #

希望为卡片组件设置p-Card类控制内边距，实现一处修改同步所有使用场景，同时想复用Tailwind默认间距值以遵循比例，另外疑惑两种实现方案的功能差异。

一、更简洁的复用默认间距设置别名的方法 #

你通过导入defaultTheme的方式是Tailwind的标准做法，已经足够简洁，无需更复杂的操作。直接在配置中映射默认间距值即可：

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      spacing: {
        // 将Card映射为默认间距8对应的值（即2rem）
        Card: defaultTheme.spacing[8],
      },
    },
  },
};

这种方式的优势是：Card这个别名会融入Tailwind的主题系统，所有依赖spacing的工具类都能直接使用它，比如p-Card、px-Card、m-Card、w-Card等，无需额外定义。

二、两种方案的功能差异 #

方案1：扩展theme.spacing #

• 通用性强：所有基于spacing的工具类都能使用该别名，包括内边距、外边距、宽高、间距相关的定位类等，覆盖场景更广。
• 自动支持变体：默认支持响应式前缀（如md:p-Card）、暗黑模式等变体，无需额外配置。
• 主题系统整合：该值可在Tailwind其他配置项或自定义工具类中引用，保持样式一致性。

方案2：自定义工具类（@layer utilities） #

• 单一性：仅能实现你定义的p-Card单一样式，若需要px-Card、md:p-Card或m-Card，需手动新增对应工具类，扩展性差。
• 变体需手动处理：响应式、暗黑模式等变体无法自动生成，需在工具类中单独编写或配置变体生成规则。
• 硬编码样式：本质是将p-8的样式重命名，与Tailwind主题系统的关联较弱，无法在其他主题相关配置中复用该值。

内容的提问来源于stack exchange，提问作者Evanss