slim-lang - Slim 模板和 TailwindCSS 在类声明中使用 ' : '

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

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

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

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

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

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

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