CODEWITHSUNDEEP
slim-langtailwind-css
greyoxide
greyoxide

Reputation: 1287

Slim templates and TailwindCSS use ' : ' in class declaration

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.

Upvotes: 4

Views: 2592

Answers (4)

appleII717
appleII717

Reputation: 368

The colon stuff was fixed in 2020 but had problem with decimal widths/sizes

..text-sm.px-4.py-2.5..

if you have to use decimal width, add it to a class attribute:

button.text-sm.px-4.text-center.inline-flex[class="py-2.5"]

Upvotes: 0

Lev Lukomskyi
Lev Lukomskyi

Reputation: 6667

The solution module.exports = { separator: "_" } as someone suggests is bad:

  1. .sm_bg-green-500 looks worse than .sm:bg-green-500
  2. You will have issues with class names like my-block__my-element. (For some tasks tailwind is not enough and I use BEM naming in such cases)

Instead – use named classes, eg.:

/*app/assets/stylesheets/application.tailwind.css*/
.magic-btn {
  @apply bg-red-500 sm:bg-green-500;
}

in template:

btn.magic-btn

Upvotes: 0

Henrik N
Henrik N

Reputation: 16274

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.

Upvotes: 6

fphilipe
fphilipe

Reputation: 10056

It's just not possible to have these colons in the class shorthand notation. You can do the following though

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

which results in the desired HTML:

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

Upvotes: 2

Related Questions