如何在Tailwind中引用CSS变量定义自定义类实现宽度复用？

方案一：给CSS变量添加单位，直接在Tailwind中引用 #

你之前的写法无效，核心原因是CSS变量--sidebar-width只定义了数字56，没有指定单位（Tailwind的w-56对应的实际尺寸是14rem，因为Tailwind默认spacing规则是1单位=0.25rem）。修改步骤如下：

1. 在CSS文件中给变量补充单位：

:root {
    --sidebar-width: 14rem;
}

2. 组件中正常引用即可生效：

<div className="w-[var(--sidebar-width)]">
   <MySidebar />
</div>

方案二：在Tailwind配置中自定义spacing，用类名直接复用 #

如果想更贴合Tailwind的使用习惯，不需要单独维护CSS变量，可以在tailwind.config.js中扩展spacing配置，把侧边栏宽度定义成自定义类名：

1. 修改Tailwind配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      spacing: {
        'sidebar': '56', // 对应Tailwind原生的w-56尺寸
      },
    },
  },
  plugins: [],
}

2. 组件中直接使用自定义类名：

<div className="w-sidebar">
   <MySidebar />
</div>

这种方式下，所有需要用到该宽度的地方直接写w-sidebar即可，无需重复写数值，复用性更强。

额外技巧：用Tailwind theme函数同步CSS变量 #

如果既想保留CSS变量，又想和Tailwind的spacing系统同步（避免手动计算单位），可以在CSS中使用Tailwind的theme()函数：

:root {
    --sidebar-width: theme('spacing.56');
}

这样变量会自动取Tailwind中spacing.56对应的14rem值，后续如果调整Tailwind的spacing配置，变量值也会同步更新。

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