Extracting Components

Extracting React components keeps utilities composable, avoiding specificity traps, duplication, and maintainability pitfalls of the CSS @apply directive.

Tailwind CSS7 min readConcept 14 of 16

What Component Extraction in Tailwind Is

In modern component-based frameworks like React, component extraction is the primary pattern for style reuse in Tailwind CSS.

Instead of writing custom CSS classes with @apply inside external stylesheets, you encapsulate HTML markup and utility classes inside reusable React components such as <Button>, <Card>, or <Badge>.

React components receive props to compute utility class strings dynamically, maintaining atomic utility co-location directly inside JSX markup.

Why React Components Excel Over the CSS @apply Directive

While the CSS @apply directive allows inline selectors to inherit utility declarations, relying on @apply introduces serious architectural drawbacks:

1. Specificity and Cascade Traps: Utilities applied inside custom selectors inherit the specificity of that custom selector. Overriding properties inline on an element with standard utilities can fail unexpectedly due to CSS specificity conflicts.

2. CSS Bundle Size Inflation: Utility-first CSS generates each utility declaration once in the output stylesheet. Using @apply across multiple custom class rules causes the CSS engine to duplicate CSS declarations inside every target rule, inflating bundle size.

3. Loss of Variant Flexibility: Using state modifiers like hover:, focus:, or responsive prefixes inside @apply requires complex nested CSS rules, destroying utility composability.

4. Class Naming Fatigue: Restores BEM class naming fatigue (.btn-primary-large-v2) and forces developers to switch constantly between JSX files and external .css stylesheets.

How to Extract Reusable React UI Components

Follow these standard steps to build composable React components with Tailwind utilities:

1. Define Component Prop Interfaces: Create TypeScript interfaces extending standard HTML attributes (interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>). Include variant and size prop options.

2. Compose Base Utilities: Define base layout, typography, and focus styles directly on the element markup (inline-flex items-center justify-center font-medium rounded-xl transition-colors focus-visible:ring-2).

3. Merge Dynamic Class Overrides: Use the cn() utility helper to combine base utilities, variant conditions, and external className overrides seamlessly without utility collisions.

Component Extraction vs @apply Comparison

Compare how React component extraction keeps utility styles composable and lightweight versus external CSS @apply directives.

// components/Button.tsx - React Component Abstraction import { cn } from "@/lib/utils"; interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: "primary" | "secondary" | "danger"; } export function Button({ variant = "primary", className, children, ...props }: ButtonProps) { return ( <button className={cn( "inline-flex items-center justify-center min-h-11 px-4 py-2.5 font-medium rounded-xl transition-colors shadow-md", variant === "primary" && "bg-sky-600 text-white hover:bg-sky-500", variant === "secondary" && "bg-slate-800 text-slate-200 hover:bg-slate-700 border border-slate-700", variant === "danger" && "bg-rose-600 text-white hover:bg-rose-500", className )} {...props} > {children} </button> ); } /* In JSX markup: cn() resolves class priority cleanly */ <Button variant="primary" className="bg-purple-600 border border-purple-400"> Submit Order (Clean purple override) </Button>
Composable Abstraction

React Button Abstraction

Passing className='bg-purple-600' to <Button> overrides bg-sky-600 via twMerge without editing stylesheet selectors.

Rendered Output

Target Background: bg-purple-600

Bundle Size ImpactZero duplication (atomic CSS)
Variant Modifier SupportFull JSX prop control
Specificity Predictability100% predictable with cn()

React component extraction keeps utility classes composable, eliminates bundle duplication, and allows seamless overrides via cn().

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Why does extracting styles via React components preserve CSS bundle size better than using @apply across multiple custom CSS classes?
  2. 2What happens when you attempt to override a property inline on an element styled with a custom @apply class (e.g. <button className='my-btn bg-red-500'>)?
  3. 3What is the best practice for accepting styling overrides in a reusable React component?

Remember this

  • Prefer React component boundaries (<Button>, <Card>) over CSS @apply directives for style reuse.
  • @apply duplicates CSS declarations in output stylesheets and breaks utility specificity predictability.
  • React components preserve full utility variant power (hover:, focus:, md:) directly in JSX markup.
  • Always accept an optional className prop in reusable components and merge it via the cn() helper.

Done with this concept?

Mark it complete to track your progress. No login needed.