Tailwind CSS：能否使用CSS变量作为字号的任意值？

你遇到的问题是因为Tailwind的任意值解析逻辑导致的：当你写text-[var(--custom-size)]时，Tailwind会把括号里的var(--custom-size)识别为颜色值，而非字号，所以生成的样式是设置文字颜色而非字体大小。

以下是几种可行的解决方法：

方法1：在Tailwind主题配置中定义引用CSS变量的字号 #

在tailwind.config.js里扩展字号配置，把CSS变量作为值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'custom-a': 'var(--custom-size-a)',
        'custom-b': 'var(--custom-size-b)',
      },
    },
  },
}

之后就可以直接用text-custom-a、text-custom-b这类类名来设置字号了。

方法2：直接用style属性设置 #

不需要依赖Tailwind的工具类，直接给元素加style属性：

<div style="font-size: var(--custom-size-a)">...</div>

方法3：自定义工具类 #

用Tailwind的@layer指令在CSS里创建自定义工具类：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-custom-a {
    font-size: var(--custom-size-a);
  }
  .text-custom-b {
    font-size: var(--custom-size-b);
  }
}

同样可以直接使用text-custom-a这类类名。

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