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 元素。我想知道是否有办法解决这个问题？我很想在 TailwindCSS 中使用 Slim。

到目前为止，我已经使用 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等等。

还有像.w-1/2Tailwind 中的类名，不受此设置的影响。您可以添加自定义类名来解决这个问题，例如

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

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