[v4] NextJS font variable not applying inside tailwind #13410
-
|
With the new alpha version of tailwind I'm not being able to export the font family that is coming from the Tailwind: 4.0.0-alpha.11 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hey! Don't forget to follow the instructions in the Next docs for setting those font variables: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#with-tailwind-css Here's a working version of your import type { Metadata } from "next";
import { Montserrat, Poppins, PT_Serif } from "next/font/google";
import "./globals.css";
const montserrat = Montserrat({
subsets: ["latin"],
variable: "--font-montserrat",
});
const poppins = Poppins({
subsets: ["latin"],
weight: ["500"],
variable: "--font-poppins",
});
const ptSerif = PT_Serif({
subsets: ["latin"],
weight: ["400"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${ptSerif.className} ${montserrat.variable} ${poppins.variable}`}
>
{children}
</body>
</html>
);
}Here's the important part: <html lang="en">
<body
- className={ptSerif.className}
+ className={`${ptSerif.className} ${montserrat.variable} ${poppins.variable}`}
>
{children}
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Hey @adamwathan, Thanks for your response. |
Beta Was this translation helpful? Give feedback.
Hey! Don't forget to follow the instructions in the Next docs for setting those font variables:
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#with-tailwind-css
Here's a working version of your
layout.tsxfile: