CSS

Add the Tailwind directives to your Global Stylesheet👍

/app/styles/tailwind.css

// tailwind.css

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: 'DM sans', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-sans--font-feature-settings: 'cv11';
}

//...more

You can then start writing Tailwind's utility classes in your application.

// component

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Last updated

Was this helpful?