Colon symbol in class names for tailwind break Pug files

Question

I am creating a project in Vue where the HTML aspect of it is written in pug. When I add a tailwind class, (for example in this case I am trying to add the classes )

.w-16.md:w-32.lg:w-48

Since it is in pug and normally classes dont have the colon, but I am using tailwind where I am trying to make this responsive to different screen sizes. I get the following error:

Unexpected token `filter` expected `text`, `interpolated-code`, `code`, `:`, `slash`, `newline` or `eos`

Is there a way where I can replace all the instances of the colon with something else, in a way where tailwind can reade it and doesnt break the project? "replacing ':' with '--' or something like that, where a class that was called .lg:w-48 can now be called .lg--w-48"

Answer 1

As per the documentation:

Separator

The separator option lets you customize which character should be used to separate modifiers (screen sizes, hover, focus, etc.) from utility names (text-center, items-end, etc.).

We use a colon by default (:), but it can be useful to change this if you’re using a templating language like Pug that doesn’t support special characters in class names.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  separator: '_',
}

Thus, if you wanted the separator to be --, you'd do:

/** @type {import('tailwindcss').Config} */
module.exports = {
  separator: '--',
}