ما الذي يفعله @apply ومتى يُستخدم

Tailwind's utility-first approach places all styles directly on HTML elements. For simple pages, this is fine. But when the same combination of 15 utility classes appears on 50 button elements, updating a single design detail requires changing 50 places. The @apply directive solves this by letting you extract frequently repeated utility combinations into a single custom CSS class — without giving up Tailwind's utility system.

@apply is a PostCSS directive that Tailwind processes during compilation. When Tailwind encounters @apply bg-blue-600 text-white font-semibold inside a CSS rule, it inlines the CSS declarations that those utilities would generate. The resulting CSS rule contains the actual property values, not Tailwind class names. The final browser output has no knowledge of Tailwind or @apply.

Use @apply inside CSS files that are processed by Tailwind. Always wrap extracted component classes in an @layer components block so Tailwind inserts them in the correct position in the generated stylesheet — after base styles but before utility classes. This ensures utility classes applied directly in HTML can still override your component class styles.

The right situations for @apply are narrow and specific. Use it when: the same utility combination appears verbatim in 5 or more places; the component is rendered in a context where you cannot control the HTML (like markdown-rendered content or a third-party component); or when framework limitations make class-based conditional logic impractical. If you can use JSX components, Vue components, or HTML partials instead, those are almost always a better choice.

Practical @apply use cases include: base button styles shared across many button instances, form input reset styles applied uniformly, typography styles for markdown-rendered blog content, and utility classes embedded in third-party component HTML you cannot modify. In all these cases, the common thread is that you cannot put the utility classes directly on the HTML element that needs them.

Tailwind has three layers: base, components, and utilities. Use @layer base for element resets and global defaults. Use @layer components for extracted component classes built with @apply. Use @layer utilities for custom single-purpose utility classes. The layer order ensures utility classes always override component classes, which override base styles — maintaining the expected specificity hierarchy.

You can use state and responsive modifiers inside @apply just like in HTML. Write hover:bg-blue-700, focus:ring-2, or md:flex directly in your @apply statement and Tailwind generates the correct selector-based CSS. This is one of the reasons @apply is more powerful than manually writing CSS — you get the full variant system without any extra effort.

You can reference other component classes created with @apply inside another @apply. For example, define a .btn base class and then reference it in .btn-primary to inherit all the base button styles. This creates a simple inheritance chain. Be cautious about deep nesting — it creates implicit dependencies that can be hard to trace when debugging.

In Vue Single File Components (SFCs) and some React setups with CSS Modules, you can use @apply inside the component's <style> block. This keeps component styles co-located with the template while still using Tailwind utilities as building blocks. Configure your bundler to process these style blocks through PostCSS with the Tailwind plugin to enable @apply.

Before reaching for @apply, always ask: can I extract this into a component instead? In React, this means a Button component that accepts a variant prop. In HTML, it means a partial or template include. Component extraction is usually better than @apply because it is explicit, searchable, and works with all frameworks. Use @apply only when component extraction is not possible or practical.

After writing an @apply rule, verify it compiles correctly by building your CSS and inspecting the output. Search the compiled CSS file for the class name you created. You should see the full CSS declarations inlined — not @apply syntax, which is stripped during compilation. If the class is missing or shows unexpected properties, check the @layer placement and ensure all referenced utilities are valid Tailwind classes.

Test your understanding of the @apply directive in Tailwind CSS.

In this lesson you learned: @apply inlines utility class CSS into a custom class name and is ideal for content you cannot add classes to directly, always place @apply-based classes inside @layer components to maintain proper specificity, and component extraction (JSX, Vue SFC, HTML partials) is usually preferable to @apply when possible. Next up we build reusable component classes with @apply.