Issues with Tailwind2 and slim-lang.com

[tordans]

Thanks for Tailwind CSS, its aweseome.

We use http://slim-lang.com/ in our Railsapp. After updating to Tailwind 2, we found issues with PurgeCSS that I wanted to share and maybe find better solutions for.

a) The new dot-spacers 2.5 are a problem; you need to change the way you write slim.

The usual way to write html with classes is:

a.text-center.font-bold SomeText
# => <a class="text-center font-bold">SomeText</a>

This does not work with the *.5-spacer classes

a.text-center.font-bold.m-2.5 SomeText
# => <a class="text-center font-bold m-2 5">SomeText</a>

One could work around this, by migrating all util classes to …

a class='text-center.font-bold.m-2.5' SomeText
# => <a class="text-center font-bold m-2.5">SomeText</a>

(… or escaping the util class .m-2\.5 which I think is worse.)

However, this is not the only problem …

b) The new dot-spacers 2.5 are a problem; the PurgeCSS Regex is complex

Writing a regex to match slim, js, jsx and html provided to be hard.
We started by adding the . to the matcher, which works for js, jsx, html but breaks slim since it does not split the slim class1.class2 syntax anymore.

We ended up customising our spacer-array and replace the dot by a zero, so we now have …

module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0px',
      '005': '0.125rem',
      1: '0.25rem',
      '105': '0.375rem',
      2: '0.5rem',
      '205': '0.625rem',
      3: '0.75rem',
      '305': '0.875rem',
      4: '1rem',
      …

(https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L33-L39)

This is not great. But it works around the issue of (a) and (b).

c) There is also a gotcha with the colon-separator and slim (and PurgeCSS)

Slim allows a short-hand to write nested html:
(https://rdoc.info/gems/slim/frames#inline-tags)

p: strong SomeBoldText
# => <p><strong>SomeBoldText</strong></p>

p.text-center: strong.bg-red-100 SomeBoldText
# => <p class="…"><strong class="…">SomeBoldText</strong></p>

To make sure those colons did not collide with PurgeCSS, we updated our Regex:

defaultExtractor: content => content.match(/[a-z0-9-_\/]+(:[a-z0-9-_\/]+)?/gi) || []

---

Does anyone know of better ways to work around those issues?
Any ideas for a nicer fallback for "2.5" (than "205" which is at least just a number that will be matched like any other).

On the plus side: This provides a bit more IE11 support, since the dot-classes are not supported in IE11.

[Brewster854]

I agree with all the benefits described before but there is a big downside for me... legibility, bem classes is a way more legible.

Dunno if only my pov but if i read the html with all those classes... I explode

I prefer see .wrapper__title than Mw-2 py-4 mb-2

FaceTime