2

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'

但我只能做到这一点。

4

2 回答 2

5

另一种选择是将 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.

于 2019-11-26T13:29:01.413 回答
1

在类速记符号中不可能有这些冒号。您可以执行以下操作

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>
于 2019-06-06T05:37:06.540 回答