Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量
Posted
技术标签:
【中文标题】Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量【英文标题】:Tailwind css - use className custom spacing value as variable for tailwind config 【发布时间】:2021-07-19 20:27:24 【问题描述】:有没有办法将间距(或其他参数)的自定义值传递给顺风配置架构,而不是在顺风配置中规定我需要的所有值?
例如,当在 px 中为 html 元素使用自定义间距值时,如下所示:
<div className="mt-15px pb-36px h-500px></div>
我目前使用下一个顺风配置:
...
spacing:
"15px": "15px",
"36px": "36px",
,
height:
"500px": "500px"
...
如果可能的话,我想拥有这样的东西:
...
spacing:
"$varpx": "$varpx",
,
height:
"$varpx": "$varpx"
...
基本上可以将任意数字传递给顺风样式的间距或其他类似参数,而无需将其指定到配置中。
有什么方法可以实现吗?
【问题讨论】:
【参考方案1】:新的 JIT 模式很容易,使用称为任意值的功能。
https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">
无需在配置中预先定义。您可以坚持使用基于 Rem 的标准间距,并仅在特殊情况下使用任意值(例如,当需要完美像素时)。
【讨论】:
非常感谢,这正是我所需要的!以上是关于Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量的主要内容,如果未能解决你的问题,请参考以下文章
Vue CLI + Tailwind:使用 CSS 变量进行主题化
Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量