Why Square bracket notation for custom values in Tailwind? - Purpose & Use Cases

The Big Idea

Discover how a tiny syntax trick lets you unlock endless design possibilities instantly!

The Scenario

Imagine you want a button with a very specific shade of blue that Tailwind doesn't have built-in. You try to write CSS for it manually or pick the closest color from Tailwind's palette.

The Problem

Manually writing CSS means switching between files, breaking your flow, and risking inconsistent styles. Picking the closest color can make your design look off or unprofessional.

The Solution

Tailwind's square bracket notation lets you write custom values directly in your class names, like bg-[#1a73e8], so you get exactly the color or size you want without extra CSS files.

Before vs After

✗ Before

button {
  background-color: #1a73e8;
  padding: 1rem;
}

✓ After

<button class="bg-[#1a73e8] p-4">Click me</button>

What It Enables

You can quickly use any custom color, size, or spacing right in your HTML, keeping your code clean and your design precise.

Real Life Example

A designer gives you a brand color that's not in Tailwind's palette. Instead of editing config files or writing CSS, you just write text-[#ff4500] to match it perfectly.

Key Takeaways

Manual CSS slows you down and breaks flow.

Square bracket notation lets you add exact custom values inline.

This keeps your code simple, fast, and design-perfect.