Fractional classes with Tailwind CSS inside a HAML file

Question

I am trying to use the w-2/3 class from Tailwind CSS with HAML in a Rails .html.haml file. The forward slash is causing Rails (or HAML) to throw an exception and I don't know how to format it so it's accepted.

Is there a way to use the w-2/3 etc classes or will I have to go back to using .html.erb?

Dowie

Answer 1

You will have to explicitly add the class, something like

%div{:class => "w-2/3"}

Note you can combine this with the shorthand syntax for classes if you want, e.g.

.foo{:class => "w-2/3"}

Ernaldus

Awesome! Thanks for your reply. I'll give it a go when I'm back near my development machine and then accept your answer. – Dowie

Answer 2

The class names used in Tailwind can be overwritten. This might help if you tend to use these classes frequently and don't want to write the extended version (%div{class: 'w-1/2'} or %div(class="w-1/2").

To overwrite the width classes to use _ instead of /, use the following configuration in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {},
    width: (theme) => ({
      auto: 'auto',
      ...theme('spacing'),
      '1_2': '50%',
      '1_3': '33.333333%',
      '2_3': '66.666667%',
      '1_4': '25%',
      '2_4': '50%',
      '3_4': '75%',
      '1_5': '20%',
      '2_5': '40%',
      '3_5': '60%',
      '4_5': '80%',
      '1_6': '16.666667%',
      '2_6': '33.333333%',
      '3_6': '50%',
      '4_6': '66.666667%',
      '5_6': '83.333333%',
      '1_12': '8.333333%',
      '2_12': '16.666667%',
      '3_12': '25%',
      '4_12': '33.333333%',
      '5_12': '41.666667%',
      '6_12': '50%',
      '7_12': '58.333333%',
      '8_12': '66.666667%',
      '9_12': '75%',
      '10_12': '83.333333%',
      '11_12': '91.666667%',
      full: '100%',
      screen: '100vw',
    }),
  }
}

Obviously, this duplicates information from Tailwind and might make framework upgrades more cumbersome.

Uralian

Thanks so much. This is also incredibly helpful! – Dowie