Tailwind css - используйте значение настраиваемого интервала className в качестве переменной для конфигурации попутного ветра

Есть ли способ передать настраиваемое значение для интервала (или других параметров) в схему конфигурации попутного ветра вместо того, чтобы прописывать все значения, которые мне нужны в конфигурации попутного ветра?

Например, при использовании настраиваемых значений интервала в пикселях для элемента 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"
        }
    ...

В основном, чтобы передать любое число в стили попутного ветра для интервала или других подобных параметров без необходимости прописывать его в config.

Есть ли способ добиться этого?

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">

Нет необходимости заранее определять это в config. Вы можете придерживаться стандартного интервала, основанного на Rem, и использовать произвольные значения только в особых случаях (например, когда требуется pixel perfect).

Другие вопросы по тегам