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.
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
.