Dark mode and fonts in your project

The designs need Tailwind CSS v4. If your project doesn’t have it yet, follow the Tailwind installation guide (opens in a new tab) for your framework first.

1. Add the dark mode line to your CSS

   Open the CSS file that has @import "tailwindcss"; in it (often app/globals.css or src/index.css) and make it look like this:

   @import "tailwindcss";
   
   /* Dark mode follows a `dark` class on <html>. */
   @custom-variant dark (&:where(.dark, .dark *));
   
   @theme {
     --font-sans: 'Inter', sans-serif;
   }

   Now the designs turn dark when your <html> tag has the class dark, and stay light when it doesn’t.

2. Load the font

   The Classic theme uses Inter. Put this in your page’s <head> (in Next.js, in app/layout.js):

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap">

   Using another theme? Its code view shows its font and a Copy Google Fonts link button. Use that link, and that font’s name in --font-sans.

3. Check your own CSS

   Starter templates come with CSS that overrides Tailwind. If a design looks different from the preview, see My design looks different.

With a dark theme

The dark themes (Encore, Motion, Orbit, Midnight, Gilded, Volt, Terminal, Velvet) are always dark, so their code has no dark: classes. Skip the dark mode line, and give your page a dark background instead:

@layer base {
  html {
    color-scheme: dark;
  }
  body {
    /* the page colour of your theme, for example */
    @apply bg-neutral-950 text-neutral-50;
  }
}