[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: 2 comments 7 replies
-
|
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.
-
|
Did that work for you? |
Beta Was this translation helpful? Give feedback.
-
|
You might have to do |
Beta Was this translation helpful? Give feedback.
-
|
That works. Wow, thanks for the quick response! |
Beta Was this translation helpful? Give feedback.
-
|
Changing For future readers: this happens if you use the |
Beta Was this translation helpful? Give feedback.
-
|
Is there a way to fix this for the pages router as well? I've tried adding a custom font-family to the config like this: But the browsers says I also tried just using the var as a custom value with |
Beta Was this translation helpful? Give feedback.
-
|
Just found a solution for this. I saw the portion in the next docs about setting a font-family in a style tag in the head (link). I used that example to create the var in a style tag in the head so tailwind's <style jsx global>{`
:root {
--my-font: ${inter.style.fontFamily};
}
`}</style> |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! If you using the App router you can use plain style: <style>
{`
:root {
--font-inter: ${inter.style.fontFamily};
--font-playfair-display: ${playfairDisplay.style.fontFamily};
}
`}
</style>``` |
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: