Slim 模板和 TailwindCSS 在 class 声明中使用“:”

Question

TailwindCSS 看起来像一个很棒的前端工具，但我想知道如何将它与 Rails Slim 模板语言一起使用？

例如：

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

如果我运行通过 HTML2SLIM 我得到这个建议：

.bg-red-500.sm:bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500

产生以下 HTML:

<div class="bg-red-500 sm">
   <bg-green-500 class="md">
      <bg-blue-500 class="lg">
         <bg-pink-500 class="xl">
            <bg-teal-500></bg-teal-500>
         </bg-pink-500>
      </bg-blue-500>
   </bg-green-500>
</div>

似乎冒号“:”被插入为多个 html 元素。我想知道是否有办法解决这个问题？我喜欢将 Slim 与 TailwindCSS 结合使用。

到目前为止，我使用 Rails' content_tag:

取得了一些进展

= content_tag :span, 'Accounts', class: 'invisible md:visible lg:visible'

但我只能到此为止了。

Answer 1

只是不可能在 class shorthand 表示法中使用这些冒号。不过您可以执行以下操作

div class="bg-red-500.sm::bg-green-500.md:bg-blue-500.lg:bg-pink-500.xl:bg-teal-500"

这会导致所需的 HTML:

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

Answer 2

另一种选择是将 Tailwind 配置为使用此处记录的另一个分隔符：https://tailwindcss.com/docs/configuration/#separator

// tailwind.config.js
module.exports = {
  separator: "_",
}

然后你可以.sm_bg-green-500等等。

Tailwind 中还有 class 个名称，例如 .w-1/2，不受此设置的影响。您可以 add custom class names 解决这个问题，例如

// tailwind.config.js
module.exports = {
  …
  theme: {
    extend: {
      width: {
        "1-of-2": "50%"
      }
    }
  }
}

然后使用.w-1-of-2.

Slim 模板和 TailwindCSS 在 class 声明中使用“:”

Slim templates and TailwindCSS use ' : ' in class declaration

slim-lang

tailwind-css