Add support for slashes w/ digits and colons in class / id names

[thewatts]

This is to add support for Tailwind CSS, which uses classnames that use dashes and colons, like w-1/2 and md:w-4.

Here's an example from their site, with an added w-1/2 class on the wrapping div:

.md:flex.w-1/2
  .md:flex-shrink-0
    img.rounded-lg.md:w-56(
      src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80"
      alt="Woman paying for a purchase")

  .mt-4.md:mt-0.md:ml-6
    .uppercase.tracking-wide.text-sm.text-indigo-600.font-bold
      | Marketing
    a.block.mt-1.text-lg.leading-tight.font-semibold.text-gray-900.hover:underline
      | Finding customers for your new business
    p.mt-2.text-gray-600
      | Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

<div class="md:flex w-1/2">
  <div class="md:flex-shrink-0">
    <img alt="Woman paying for a purchase" class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=448&amp;q=80">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

More Examples:

• Responsive Design
• Width

[thewatts]

@stonean build is passing for this now.

Curious - those failures - have you seen those specific ones in the past?

Just want to be extra sure that my additions (here or in master) aren’t causing problems 😇

[cllns]

@thewatts Thanks for this work. I just changed my Gemfile to use your branch (until this gets merged), so I can use Tailwind as well, and it works great. :)

[thewatts]

@stonean thanks for merging this in!

[daemonsy]

This is awesome! Also, it seems like the last release of Slim was in 2018 from Rubygems, so I can't sleuth the cadence for release.

Is there any expectations on when this improvement be released?

[sergiopantoja]

@daemonsy In case you haven't seen already, 4.1.0 is released now on RubyGems.