如何在TailwindCSS中不使用var()静态引用@theme定义的值？

问题 #

在CSS中用var()嵌套引用变量时，没法正确追踪原变量的变更。想知道在Tailwind CSS里，有没有不用var()的方式引用@theme中声明的值，把值直接硬编码到目标样式位置，而不依赖CSS变量？

比如以下示例中，组件类.example使用var(--color-clifford)生成的样式是变量引用，而工具类.bg-clifford则是硬编码的颜色值，期望组件类也能生成硬编码的实际值。

原示例代码 #

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme inline {
  --color-clifford: #da373d;
}

@layer components {
  .example {
    margin: --spacing(4);
    width: --spacing(64);
    height: --spacing(16);
    background-color: var(--color-clifford);
  }
}
</style>

<div class="example">Hello World by Component</div>
<div class="m-4 w-64 h-16 bg-clifford">Hello World by Utilities</div>

原生成的CSS #

组件类保留变量引用：

.example {
  background-color: var(--color-clifford);
}

工具类是硬编码值：

.bg-clifford {
  background-color: #da373d;
}

期望效果 #

组件类也生成硬编码值：

.example {
  background-color: #da373d; /* 替代var(--color-clifford) */
}

.bg-clifford {
  background-color: #da373d;
}

解决方案 #

在Tailwind CSS v4中，可以使用**theme()函数**（浏览器版也支持--theme()语法）直接引用主题值，编译时会将对应的值静态插入样式中，不会生成CSS变量引用。

修改后的代码 #

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme inline {
  --color-clifford: #da373d;
}

@layer components {
  .example {
    margin: --spacing(4);
    width: --spacing(64);
    height: --spacing(16);
    /* 使用theme()函数直接获取主题颜色的实际值 */
    background-color: theme('colors.clifford');
  }
}
</style>

<div class="example">Hello World by Component</div>
<div class="m-4 w-64 h-16 bg-clifford">Hello World by Utilities</div>

最终生成的CSS #

.example {
  margin: 1rem;
  width: 16rem;
  height: 4rem;
  background-color: #da373d;
}

.bg-clifford {
  background-color: #da373d;
}

说明 #

theme()是Tailwind的内置函数，能够直接访问@theme块中定义的主题配置值，编译阶段就会把对应的实际值替换进去，完全不需要依赖CSS变量，也就不存在变量追踪的问题。在浏览器端的Tailwind运行环境中，也可以用--theme(colors.clifford)的写法，效果一致。

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