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。

Slim模板和TailwindCSS在类声明中使用'：'

1 个答案: