有没有办法在Laravel Blade中基于PHP变量动态应用'row-span-y' Tailwind CSS实用程序类？

to94eoyn 于 2023-05-27 发布在 PHP

关注(0)|答案(1)|浏览(79)

我需要在div上应用'row-span-y' Tailwind CSS实用程序类，该div是基于PHP变量的grid-layout的一部分，该变量的值介于2和16之间。
到目前为止，我发现的唯一可行的方法就是这样做：

$variable = 3;
switch ($variable) :
    case 2:
        echo '<div class="row-span-2">';
        break;
    case 3:
        echo '<div class="row-span-3">';
        break;
    case 4:
        echo '<div class="row-span-4">';
        break;
    case 5:
        echo '<div class="row-span-5">';
        break;
...
endswitch;

echo '</div>'

我不想那样做我想做的是：

$variable = 3;
echo '<div class="row-span-' . $variable . '"></div>';

但这似乎不适用于Tailwind CSS。无法识别实用程序类。

php

来源：https://stackoverflow.com/questions/76334424/is-there-a-way-to-dynamically-apply-the-row-span-y-tailwind-css-utility-class

1条答案

按热度按时间

kkbh8khc1#

您可以考虑使用style属性，如：

$variable = 3;
echo '<div style="grid-row: span ' . $variable . ' / span ' . $variable . ';"></div>';

或者，因为你似乎已经知道了可能值的详尽列表，你可以safelist类，比如：

module.exports = {
  // …
  safelist: [
    { pattern: /^row-span-(1[0-6]|[2-9])$/ },
  ],
  theme: {
    extend: {
      // Add extra row-span-* from 7 to 16 since they do not exist in the
      // default Tailwind configuration.
      gridRow: Object.fromEntries(
        Array(10).fill().map((_, i) => {
          const span = i + 7;
          return [
            `span-${span}`,
            `span ${span} / span ${span}`,
          ];
        }),
      ),
    },
  },
  // …
}

赞(0）回复(0）举报 2023-05-27

我来回答

有没有办法在Laravel Blade中基于PHP变量动态应用'row-span-y' Tailwind CSS实用程序类？

1条答案

相关问题

热门标签

最新问答