You need to enable JavaScript to run this app. 如何不修改全局配置使用Tailwind间距单位设置min-width?
优惠活动
大模型
产品
解决方案
定价
更多

如何不修改全局配置使用Tailwind间距单位设置min-width?

解决方案
  • 方法1:在自定义CSS中使用theme()函数
    Tailwind 原生提供theme()函数,无需修改任何全局配置,即可直接读取tailwind.config.js中定义的所有配置值,包括你自定义的间距单位,完全不需要重复定义数值。
    你给出的示例代码可修改为如下可运行形式:
.myButton{
  @apply bg-red-100 w-auto;
  min-width: theme('spacing.11');
} 

如果后续你修改了配置文件中的spacing.11数值,所有调用该值的地方会自动同步更新,不会出现数值不一致的问题。

  • 方法2:在HTML标签中直接使用带theme调用的任意值类
    如果你不需要单独编写自定义CSS,可以直接在元素的class属性中实现对应效果,同样不需要修改全局配置:
<button class="bg-red-100 w-auto min-w-[theme(spacing.11)]">
  按钮
</button>

内容的提问来源于stack exchange,提问作者Bernie

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.13 03:12:04