Tailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量答案

【问题标题】：Tailwind css - use className custom spacing value as variable for tailwind configTailwind css - 使用 className 自定义间距值作为 tailwind 配置的变量
【发布时间】：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: {
            "${var}px": "${var}px",
    },
    height: {
            "${var}px": "${var}px"
        }
    ...

基本上可以将任意数字传递给顺风样式的间距或其他类似参数，而无需将其指定到配置中。

有什么方法可以实现吗？

【问题讨论】：

标签： css tailwind-css tailwind-in-js

【解决方案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 的标准间距，并仅在特殊情况下使用任意值（例如，当需要完美像素时）。

【讨论】：

非常感谢，这正是我所需要的！