On Tailwind CSS arbitrary values

I have been using Tailwind CSS since 2018 and I super love the framework. It's so flexible, powerful, and brings so much joy writing CSS.

Here are some of my favorite tips when using Tailwind CSS Arbitrary Values to write custom styles for your components. Some of them are covered in the official documentation, some I couldn't find (maybe they are their hidden gems ), and some are just my own personal tricks.

Arbitrary values

Arbitrary values are values that are not predefined in the Tailwind CSS configuration. We use the square brackets annotation [] to generate a class on the fly with any value:

<div className="bg-[#f00]" />

This will output the following CSS:

.bg-\[\#f00\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 0 0 / var(--tw-bg-opacity)) /* #ff0000 */;
}

Referencing design tokens

We can use the theme() function to reference design tokens in tailwind.config.js:

<div className="[--song-color:theme(colors.gray.200)]" />

Output CSS:

.\[--song-color\:theme\(colors\.gray\.200\)\] {
  --song-color: #e5e7eb;
}

With CSS variables

We can also use CSS variables to generate arbitrary values:

<div className="h-[var(--section-height)]" />

You can get rid of the var(...) wrapper, just provide the variable name is enough:

<div className="h-[--section-height]" />

This will output the following CSS:

.h-\[var\(--section-height\)\] {
  height: var(--section-height);
}

But for variables with fallback values to another variable, we still need to use the var(...) wrapper:

<div className="h-[var(--section-height,var(--fallback-height))]" />

Output CSS:

.h-\[var\(--section-height\,var\(--fallback-height\)\)\] {
  height: var(--section-height, var(--fallback-height));
}

Injecting CSS variables

CSS variables can be injected into the DOM with inline styles like this:

<div style={{ '--song-color': '#f00' }} />

But with arbitrary values, we can do this:

<div className="[--song-color:#f00]" />

Which will output the same CSS variables declaration as above.

Out of the box utilities

For properties that are not supported by default in Tailwind CSS, we can also use the square bracket notation to write completely arbitrary CSS:

<div className='[background-image:url("/static/images/black-grit.png")]' />

Handling whitespaces

We must remove whitespaces from the arbitrary classes to make them work or use the underscore notation _ for better readability:

<div className="shadow-[6px_6px_12px_-1px_rgba(0,_0,_0,_0.1)]" />

Resolving namespace collisions

Many CSS properties share the same namespace in Tailwind CSS, for example bg-red-500 and bg-cover, or text-gray-900 and text-2xl.

To avoid collisions when using arbitrary values, we can prefix a CSS data types (color:, length:, etc.) to the property value:

<div className="bg-[length:100%_50%]" />

This is super useful when using with variables, for example:

<div className="bg-[color:--variable]" />
// or just `bg-[--variable]`

will output CSS for background color:

.bg-\[--variable\] {
  background-color: var(--variable);
}

And adding a length: prefix will output the css for background-size:

<div className="bg-[length:--variable]" />

Output:

.bg-\[length\:--variable\] {
  background-size: var(--variable);
}

That's some of my favorite notes when using Tailwind CSS Arbitrary Values. Do you have any other tips? Please let me know in the comment section

Happy styling (with Tailwind CSS)