Why arbitrary values exist in Tailwind - The Real Reasons

The Big Idea

Discover how to break free from preset limits and style anything exactly how you want with Tailwind!

The Scenario

Imagine you want a button with a very specific shade of blue that Tailwind doesn't have by default.

You try to pick the closest color from the preset list, but it never looks quite right.

The Problem

Manually overriding styles with custom CSS means extra files, more code, and harder maintenance.

You lose the simplicity and speed that Tailwind promises.

The Solution

Arbitrary values let you write exactly the style you want right inside your Tailwind class.

No extra CSS files, no guessing--just precise control with simple syntax.

Before vs After

✗ Before

class="bg-blue-500" style="background-color: #3a86ff;"

✓ After

class="bg-[#3a86ff]"

What It Enables

You can customize designs freely while keeping Tailwind's fast, clean workflow.

Real Life Example

A designer wants a card with a unique shadow color that isn't in Tailwind's palette. Using arbitrary values, you add shadow-[0_4px_6px_rgba(58,134,255,0.5)] directly in the class.

Key Takeaways

Manual CSS overrides slow you down and clutter your code.

Arbitrary values let you write exact styles inside Tailwind classes.

This keeps your code clean, fast, and easy to maintain.