Styling

Tailwind CSS ／ CSS Modules ／ styled-components

Our pick

Tailwind CSS

Just add class names to style things, with no jumping between files. It also pairs well with shadcn/ui

Compare the result

We built the same thing with each library. Try them out.

Tailwind CSS

CSS Modules

styled-components

Compare the code

Edit the code and the preview on the right updates.

export default function App() {
  return (
    <div className="m-4 rounded-xl border p-6">
      <h2 className="text-lg font-semibold">My first card</h2>
      <p className="mt-2 text-sm text-gray-500">
        The heading, description, and button are styled with class names alone.
      </p>
      <button className="mt-4 rounded-lg bg-black px-4 py-2 text-sm text-white hover:bg-gray-700">
        Learn more
      </button>
    </div>
  )
}