tailwindcss.com

tailwindcss.com copied to clipboard

I was helping some high school students on a project. They were trying to set an arbitrary width using w-{42} and were insistent that they saw this in the docs , frustrated that it didn't work, and had given up and set the width in the style property.

Turns out this is what they were seeing:

Use w-{number} or w-px to set an element to a fixed width.

I pointed out the correct syntax for an arbitrary value further down the page - w-[42px] - and explained that curly braces in that context often denote a placeholder to be substituted with your value.

I can see how this would be confusing to someone just starting out and not familiar with that particular idiom.

I'm not really sure what I'd suggest as an alternative notation for the docs - maybe replace the {...} notation with some kind of graphical treatment for the placeholder word?

Anyway I thought you'd want to know - it's the sort of thing that you wouldn't think of as confusing until you observe someone being confused by it.