如何不修改全局配置使用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
相关产品推荐
相关产品推荐

