How to use Next.js @next/font with TailwindCSS

Leo — Wed, 04 Jan 2023 01:19:31 +0000

I'll go straight to the point. Next.js 13 will optimize your fonts out of the box. But... how to use them alongside with TailwindCSS?

Working with the new layout.tsx

Under app/layout.tsx, import:

import { Inter, Oswald } from "@next/font/google";

Then, initialize their instances:

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const oswald = Oswald({ subsets: ["latin"], variable: "--font-oswald" });

Let's now add our font's variables as classNames inside our <html> tag:

<html lang="en" className={`${inter.variable} ${oswald.variable}`}>

Moving to tailwind.config.js

Add both fonts to the fontFamily TailwindCSS configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        inter: ["var(--font-inter)"],
        oswald: ["var(--font-oswald)"],
      },
    },
  },
  plugins: [],
};

Finally, let's use them:

Under app/page.tsx:

export default function Home() {
  return (
    <main className="font-inter font-extralight">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    </main>
  );
}

Replace font-inter with font-oswald and you'll see Oswald taking place. Isn't it beautiful? ✨

DEV Community: Leo

How to use Next.js @next/font with TailwindCSS

Working with the new layout.tsx

Moving to tailwind.config.js

Finally, let's use them: