Values Outside the Scale

Sometimes you need a value that the scale or the palette doesn't have: a color from the shelter's logo, an exact size from a designer's drawing or a percentage. For that, Tailwind lets you write any CSS value in square brackets after the name of a class. These are called arbitrary values:

Tailwind makes the CSS for such a class when it finds it in your files, just like for any other class. There must be no spaces inside the brackets: a space separates classes, so w-[350 px] becomes two classes that don't exist, and nothing happens.

Arbitrary values are handy, but use them only as an exception. Each of them is a small step away from the scale and the palette, and when there are many, the spaces and colors of the site stop fitting together. If you catch yourself writing p-[15px], p-4 (16 pixels) is almost certainly just as good. And a color that you'd use on many pages is better added to Tailwind's theme under its own name, as you'll learn in the lesson on customizing Tailwind.

The shelter's posters and flyers are printed on cream-colored paper, #fdf6ec , and Luna's page should have the same color. The palette doesn't have it, so for one page, an arbitrary value is just right.