@apply for extracting patterns in Tailwind - Browser Rendering Trace

Render Flow - @apply for extracting patterns

Read CSS file

↓

Find @apply directive

↓

Extract utility classes

↓

Replace @apply with expanded CSS rules

↓

Generate final CSS

↓

Browser applies styles to HTML elements

↓

Render styled elements

The browser reads the CSS with @apply, Tailwind expands the utility classes into actual CSS rules, then the browser applies these styles to the HTML elements and renders the styled page.

Render Steps - 3 Steps

Code Added:<button class="btn-primary">Click me</button>

Before

[ ]
(No visible button)

→

After

[ Click me ]
(Button with default browser style)

Adding the button element creates a clickable area with default browser styles.

🔧 Browser Action:Creates DOM node and applies default user agent styles

Code Sample

A blue button with white bold text, padding, and rounded corners styled using @apply to reuse Tailwind utilities.

Tailwind

<button class="btn-primary">Click me</button>

Tailwind

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

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

Render Quiz - 3 Questions

After applying step 2, what visual change do you see on the button?

A Button text becomes bold

B Button corners become rounded

C Button background changes to blue

D Button text color changes to white

Common Confusions - 3 Topics

Why doesn't @apply work with arbitrary values like bg-[#123456]?

@apply only works with predefined Tailwind utility classes, not arbitrary values. You must use standard utilities or write custom CSS.

💡 Use only official utility class names inside @apply.

Why does adding @apply sometimes not change the button style?

If the CSS file is not processed by Tailwind or PostCSS, @apply won't expand. Make sure your build setup supports Tailwind processing.

💡 Check your build tools to ensure Tailwind CSS is active.

Why can't I use @apply with pseudo-classes like hover:bg-blue-700?

@apply does not support pseudo-classes directly. You need to write separate CSS rules for hover states.

💡 Use normal CSS selectors for pseudo-classes, not @apply.

Property Reference

Property	Value Applied	Visual Effect	Common Use
bg-blue-600	background-color: #2563eb;	Changes background to blue	Button backgrounds, highlights
text-white	color: #ffffff;	Makes text white	Text color for contrast
font-bold	font-weight: 700;	Makes text bold	Emphasizing text
py-2	padding-top & bottom: 0.5rem;	Adds vertical padding	Spacing inside buttons or blocks
px-4	padding-left & right: 1rem;	Adds horizontal padding	Spacing inside buttons or blocks
rounded	border-radius: 0.25rem;	Rounds corners	Softening edges of boxes or buttons

Concept Snapshot

@apply lets you reuse Tailwind utility classes inside your CSS. It expands utilities like bg-blue-600, text-white, font-bold into real CSS. Use it to keep your CSS DRY and consistent. @apply works only with standard utilities, not arbitrary values or pseudo-classes. Make sure your build setup processes Tailwind CSS for @apply to work.