Why Arbitrary color values in Tailwind? - Purpose & Use Cases

The Big Idea

What if you could pick any color you want instantly without leaving Tailwind's comfort zone?

The Scenario

Imagine you want your website button to have a very specific shade of blue that is not in the default color list.

You try to write CSS for it manually or pick the closest color from Tailwind's palette.

The Problem

Manually writing CSS for each unique color is slow and breaks the consistency of your Tailwind setup.

Picking the closest default color means your design looks off and less unique.

The Solution

Arbitrary color values let you write any color directly inside Tailwind classes using square brackets, keeping your code clean and consistent.

Before vs After

✗ Before

button {
  background-color: #4a90e2;
  color: white;
}

✓ After

class="bg-[#4a90e2] text-white"

What It Enables

You can use any exact color you want while still using Tailwind's utility-first approach.

Real Life Example

A brand requires a unique color for their call-to-action buttons that is not in Tailwind's palette; arbitrary colors let you match it perfectly without extra CSS files.

Key Takeaways

Manually adding unique colors is slow and inconsistent.

Arbitrary color values let you use any color directly in Tailwind classes.

This keeps your design precise and your code clean.