@apply and extracting components

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

advanced

This lesson

This lesson teaches @apply and extracting components—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply @apply and extracting components in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When intermediate lessons feel comfortable and you are ready for production-style trade-offs.

When the same utility chain appears everywhere, extract it:

Framework component — React/Vue/Svelte props (preferred in apps)
@apply in CSS — bundle utilities into .btn-primary in a layer
Partial templates — Blade, ERB, or includes for static sites

@apply guidelines

Use @apply for truly repeated primitives (buttons, badges), not entire pages. Over-extraction hides Tailwind’s benefit and reintroduces naming debates.

.btn-primary {
  @apply rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700;
}

Important interview questions and answers

Q: @apply vs component?
A: Components add props and logic; @apply is CSS-only extraction for design primitives.
Q: Why do some teams ban @apply?
A: It can produce larger CSS and obscure markup; they prefer colocated utility strings or UI components.

Self-check

When is a React component better than @apply?
What is one risk of @apply-heavy codebases?

Interview prep

When is @apply appropriate?: Sparingly—for third-party widgets or legacy CSS files; prefer utilities in components for most app UI.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Would you @apply this cluster or keep utilities in markup?
When is a Vue/React component the better extract?

No discussion yet. Be the first to ask a question.