Slim templates and TailwindCSS use ' : ' in class declaration

Question

TailwindCSS is looking like a great frontend tool but I'm wondering how to use it with the Rails Slim template language?

For example:

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

If I run it through HTML2SLIM I get this recommendation:

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

Which produces the following 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>

It seems that the colon ':' is interperted as multiple html elemments. Im wondering if there's a way around this? I'd love to use Slim with TailwindCSS.

So far I've made some progress using Rails' content_tag:

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

But I can only go so far with this.

Answer 1

Another option is to configure Tailwind to use another separator as documented here: https://tailwindcss.com/docs/configuration/#separator

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

Then you could do .sm_bg-green-500 and so on.

There are also class names like .w-1/2 in Tailwind, that are not affected by this setting. You could add custom class names to work around that, e.g.

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

and then use .w-1-of-2.