Tailwind: Utility-first CSS

Tailwind is a CSS framework that gives you small utility classes for every common style. Instead of writing CSS files, you add classes like p-4, text-lg, bg-emerald-600 directly to your JSX. The result is styling without context switching and without naming classes you will forget the meaning of in a week.

BookCard.tsx
tsx
export function BookCard({ book }: { book: Book }) {
  return (
    <div className="rounded-lg border border-stone-200 bg-white p-4 shadow-sm">
      <h3 className="text-lg font-semibold text-stone-900">{book.title}</h3>
      <p className="text-sm text-stone-600">by {book.author}</p>
      <p className="mt-2 text-xl font-bold text-emerald-600">${book.price.toFixed(2)}</p>
      <button
        disabled={book.stock === 0}
        className="mt-3 rounded-md bg-emerald-600 px-4 py-2 text-white disabled:bg-stone-300"
      >
        {book.stock === 0 ? 'Sold Out' : 'Add to Cart'}
      </button>
    </div>
  );
}

Same card, styled entirely with Tailwind utilities.

Utility-first feels wrong at first. Every element looks noisy. The payoff shows up when you maintain the codebase: the styles live next to the markup, you never have to search for a class definition in another file, and you stop naming things. If the component is reused, you extract it into a component, not a class. That is the shift.

Validation checklist: Build a small React + Tailwind slice

Loading practice…

Checkpoint: React and Tailwind checkpoint

Loading practice…