Customizing the Theme (v4)

🧑‍🏫 Sabse pehle — simple mein samjho#

Puraane Tailwind mein apni pasand ke colors ya fonts setup karne ke liye ek lamba choda tailwind.config.js file banana padta tha. Tailwind v4 ne isko hamesha ke liye hata diya hai! Ab sab kuch seedha CSS variables se control hota hai. Tumhe bas apni main CSS file mein @theme block likhna hai aur wahan naye variables define karne hain. Tailwind automatically un variables ki classes bana dega!

The v4 Shift: Goodbye tailwind.config.js#

In Tailwind CSS v4, the configuration file is obsolete. The entire design system is now powered by CSS variables within your central CSS file (e.g., index.css). This dramatically simplifies configuration and makes integration with modern frontend tooling much smoother.

Using the @theme Directive#

To add custom colors, fonts, or spacing, you open a @theme block right below your tailwind import.

@import "tailwindcss";

@theme {
  /* Adding a new brand color */
  --color-brand: #ff0055;
  
  /* Adding a new font family */
  --font-display: "Outfit", sans-serif;
  
  /* Adding a custom spacing size */
  --spacing-huge: 120px;
}

How Tailwind Uses These Variables#

As soon as you define those variables, Tailwind's engine instantly generates the corresponding utility classes for you to use in your HTML!

• --color-brand -> unlocks bg-brand, text-brand, border-brand
• --font-display -> unlocks font-display
• --spacing-huge -> unlocks p-huge, m-huge, w-huge

Overriding Default Values#

If you want to overwrite a default Tailwind value (for example, completely changing what the gray color means in your app), you just define the CSS variable that corresponds to it.

@import "tailwindcss";

@theme {
  /* This completely replaces Tailwind's default gray-500 */
  --color-gray-500: #8c8c8c;
}

Why is this better?#

1. Zero Configuration Files: You don't have to bounce between JS config files and CSS files.
2. Native CSS Variables: Since these are standard CSS variables, you can read them at runtime in JavaScript if you ever need to!
3. Faster Builds: The Oxide engine parses this CSS natively at lightning speed.

Playground#

You cannot directly edit @theme CSS in this HTML-only playground, but you can simulate the outcome using arbitrary properties. If you had defined --color-brand: #ff0055, using bg-brand would look exactly like the arbitrary value bg-[#ff0055] below.

<!-- Simulating a custom theme color (#ff0055) and font -->
<div class="max-w-md mx-auto p-8 rounded-2xl bg-white shadow-xl border border-gray-100 text-center">
  <div class="w-16 h-16 mx-auto bg-[#ff0055]/10 text-[#ff0055] rounded-full flex items-center justify-center mb-6 ring-4 ring-[#ff0055]/20">
    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
  </div>
  <h2 class="font-black text-3xl text-gray-900 m-0 tracking-tight" style="font-family: 'Outfit', sans-serif;">
    Made with <span class="text-[#ff0055]">Brand Color</span>
  </h2>
  <p class="text-gray-500 mt-4 mb-8 text-sm">By configuring your CSS variables in v4, you can completely overhaul the look and feel globally!</p>
  <button class="w-full py-3 bg-[#ff0055] hover:bg-[#d60047] text-white font-bold rounded-xl transition-all shadow-[0_4px_14px_0_rgba(255,0,85,0.39)] hover:shadow-[0_6px_20px_rgba(255,0,85,0.23)] hover:-translate-y-1">
    Subscribe Now
  </button>
</div>