How do you set up and use Tailwind CSS in a Next.js project?

You can choose to include Tailwind CSS when creating your project with create-next-app, or install and configure it manually afterward, and once set up, you apply pre-built utility classes directly in your JSX to style elements without writing separate CSS files at all.

// tailwind.config.js is generated automatically

export default function Card() {
  return (
    <div className="rounded-lg shadow-md p-4 bg-white">
      <h2 className="text-xl font-bold">Card Title</h2>
    </div>
  );
}