Tailwind CSS·Tailwind from utilities to design system

Extract components

Use @layer components and @apply to keep repeated patterns maintainable.

Intermediate 13 min read Lesson 8 of 300 Challenge included

What you will be able to do

Extract after the pattern repeats, not before.
Put component classes in @layer components.
Keep the class name semantic: card, btn, field.
Do not recreate every utility as a component.

In plain English

Utilities are great until the same twenty classes repeat in every card. Extract a component class with @apply, place it in @layer components, and keep the utility escape hatch available for one-off changes.

components.cssCSS

@layer components {
  .card {
    @apply rounded-xl border border-slate-200 bg-white p-6 shadow-sm;
  }

  .btn {
    @apply inline-flex items-center rounded-md px-4 py-2 text-sm font-medium;
  }
}

Your turn

Create a button component

Medium

Define a .btn-primary component with rounded corners, cyan background, white text and medium weight.

CSS · starter

@layer components {

Check your understanding before moving on.

Knowledge checkQuestion 1

When should you extract a component class?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Dark mode and theming

Lesson 8 of 300 · 0% of course