Functions and Directives

🧑‍🏫 Sabse pehle — simple mein samjho#

Kabhi-kabhi humara HTML file classes se bhar jata hai, aur humein lagta hai "yaar ye button ki classes (bg-blue-500 text-white rounded p-4) main baar-baar kyu likh raha hu?". Iska ek jugaad hai @apply. Isse tum Tailwind ki classes ko normal CSS file mein bhej sakte ho. Lekin dhyan rakhna, Tailwind ke creators khud bolte hain ki ise kam se kam use karo. React mein classes nikalne se behtar hai, tum us chiz ka ek Reusable Component bana lo!

The @apply Directive#

If you absolutely must extract a common utility pattern into a custom CSS class, use @apply. It pulls the styles defined by Tailwind's utilities into your custom class.

/* index.css */
@import "tailwindcss";

.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded transition hover:bg-blue-600;
}

Now you can just use class="btn-primary" in your HTML.

The @apply Warning ⚠️#

While @apply looks tempting, overusing it is an anti-pattern. If you extract every button, card, and input into @apply classes, you are just writing traditional BEM CSS again, completely defeating the entire purpose of Tailwind (which is avoiding context-switching and naming fatigue).

In React, instead of extracting CSS classes, extract React components:

// DO THIS: Extract a reusable React component
function Button({ children }) {
  return (
    <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600">
      {children}
    </button>
  );
}

The theme() Function#

If you are writing custom CSS and need to access a specific value from Tailwind's design system (so you don't hardcode hex colors), you can use the theme() function.

Note: In Tailwind v4, since everything is driven by standard CSS variables, you can often just use var(--color-blue-500) directly! However, the theme() function still exists for backwards compatibility and specific lookups.

.my-custom-element {
  /* Using native v4 CSS variables (Preferred) */
  background-color: var(--color-blue-500);
  
  /* Or using the theme function */
  padding: theme('spacing.4');
}

The @tailwind Directive (Deprecated in v4)#

In Tailwind v3, you had to inject the framework layers into your CSS like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

In Tailwind v4, this is obsolete! All you need is the single import statement:

@import "tailwindcss";

The v4 engine handles all the layers, scoping, and preflight injections automatically.

Playground: Why extraction isn't always needed#

Even complex components can be built directly in HTML. If you extract this to a React component, you only write the utility classes once anyway!

<!-- A beautiful Profile Card built entirely with utility classes -->
<div class="group max-w-sm mx-auto p-6 bg-white border border-gray-100 rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all">
  <div class="flex items-center gap-5">
    <div class="relative">
      <div class="w-16 h-16 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 p-[2px]">
        <div class="w-full h-full bg-white rounded-full border-2 border-white flex items-center justify-center">
          <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-tr from-indigo-500 to-purple-500">TR</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
    </div>
    <div>
      <h3 class="font-bold text-gray-900 text-lg m-0 leading-tight">Tarun Rana</h3>
      <p class="text-sm text-gray-500 m-0 mt-1">@tarunrana &bull; Pro</p>
    </div>
  </div>
  <div class="mt-6 flex gap-3">
    <button class="flex-1 py-2.5 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-xl transition-colors text-sm">
      Message
    </button>
    <button class="flex-1 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-900 font-semibold rounded-xl transition-colors text-sm">
      Follow
    </button>
  </div>
</div>