Tailwindcss: Slash substitute for Pug

Created on 21 Apr 2020 · 3Comments · Source: tailwindlabs/tailwindcss

Hello, amazing people!

I had some issues with colon and slash in Pug templates.
I believe Tailwind and Pug were born to be together. But...

Anyway, I found the way to change the "separator" for display option (aka colon in md:py-2), thanks or that, tbh btw!

But the slashes still make problems, like in "w-1/2" or whatever.
How about adding some "divider" option, or something like that, so I still can enjoy TWCSS?

10x for your work, stay amazing each RC!

Source

vannyvann

👍1

Most helpful comment

Programmatic replacement is a bit trickier as you would have to resolve the config to change the keys.
Because of this, it's not really possible as a plugin but can work as an extra node utility to resolve the config.
Created a working example on codesandbox:
https://codesandbox.io/s/blue-frost-kzw86?file=/replaceFractionDivider.js

tlgreg on 21 Apr 2020

👍2

All 3 comments

Hey @vannyvann! You can actually configure this already by just editing the properties in the width section of your config:

// tailwind.config.js
module.exports = {
  theme: {
    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',
    }),
  },
}

No plans to introduce a configuration option for this right now unfortunately.