Using Square Brackets in Class Names with Pug and Tailwind CSS

Question

I'm trying to use both Pug and Tailwind CSS for a project. I encountered an issue when trying to utilize Tailwind's custom values syntax (using square brackets) in a Pug template.

I understand that h-[127px] is a valid Tailwind class for setting a custom height. However, it seems that Pug does not like the square brackets.

Is there a way to integrate square bracket syntax in Pug while using Tailwind CSS? If not, what's the recommended workaround to use custom values from Tailwind within a Pug template? Thank you for any assistance!

Answer 1

What won't work: Square brackets (even escaped) won't work using Pug's shorthand class syntax:

// won't work
img.avatar.h-[127px](src='foobar.png')
 
// also won't work
img.avatar.h-\[127px\](src='foobar.png') 

What will work: But you can use square brackets with the regular attribute syntax:

// will work
img(class='avatar h-[127px]', src='foobar.png') 

Also note you can mix the class shorthand with a regular class attribute, so you can keep using the shorthand for all of the classes without brackets, and only use the longhand for the offending classes:

// will work, and is equivalent to the previous example
img.avatar(class='h-[127px]', src='foobar.png')