React › Styling in React (CSS Modules, Styled Components & Tailwind)

What is Tailwind CSS and how does its approach differ from writing traditional custom CSS?

Intermediate

Answer

Tailwind CSS provides many small, single purpose utility classes, like flex, text center, or bg blue 500, that you combine directly in your JSX to build a design, instead of writing your own separate custom CSS classes and rules for every single element.

function Card() {
  return (
    <div className="bg-white rounded-lg shadow-md p-4">
      <h2 className="text-xl font-bold">Product Name</h2>
      <p className="text-gray-600">Product description here</p>
    </div>
  );
}

Real-world example A team builds an entire product card's layout and styling directly inside its JSX using Tailwind's utility classes, without writing a single separate CSS file for that specific component.

Common follow-ups: What is the main criticism people have about Tailwind's approach of adding many classes directly in JSX?;How does Tailwind keep its final CSS file small despite offering so many utility classes?

Components & JSX;Build Tools & Bundlers (Vite Webpack & CRA)