Tailwind Arbitrary Properties

Tailwind is a fantastic CSS framework that makes it so simple to write CSS code. However, sometimes you need to break outside the boundaries of the set of default classes and do something a little custom.

Arbitrary variants are fairly common in Tailwind code, especially for fixed heights/widths. They look something like this:

"h-[41px] border-[#ffffff]"

This works for any of the CSS properties that Tailwind supports, but sometimes you might need to use a property that Tailwind doesn’t support natively. This is where arbitrary properties come in:

"[print-color-adjust:exact]"

As you can see, they look very similar to arbitrary variants, but the entire directive is included within the brackets. They look basically identical to the typical way you would write the property in CSS, just without any spaces so that it is recognized as a single complete class name.

This works for more than just properties, you can also use it for assigning CSS variables, which is where this feature really shines:

"[--nav-height:48px]"