Apply custom font family tailwincss v4 / Next.js 15 #15923

AliMejbar · 2025-01-27T13:11:30Z

AliMejbar
Jan 27, 2025

Hey everyone,
I have a bit of trouble using custom font families with tailwindcss v4 and Next.js 15. The part that specially troubles me is that it seems tailwindcss can't get the injected var --font-geist-sans of by Next.js and only redefining it in @theme fixes it. I've made a repo that tests out how different classes will render, The page itself contains a script that appends to each the font family actually rendered. The globals.css file contains commented out @theme font family variables properties , I've also made branches with enabling each one and how it affects the render.
layout.tsx

import { Geist } from "next/font/google";
import type React from "react";
import "./globals.css";

const geistSans = Geist({
	variable: "--font-geist-sans",
	subsets: ["latin"],
});

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode;
}>) {
	return (
		<html lang="en">
			<body className={`${geistSans.variable} antialiased`}>{children}</body>
		</html>
	);
}

page.tsx

"use client";
import { useEffect } from "react";

export default function Home() {
	useEffect(() => {
		const items = document.querySelectorAll("li");
		for (const item of items) {
			const computedStyle = window.getComputedStyle(item);
			item.setAttribute("style", computedStyle.fontFamily);
		}
	}, []);
	return (
		<>
			<ul className="text-3xl font-bold *:relative *:after:text-base *:after:text-slate-600 *:after:content-[attr(style)] *:after:ml-2 *:after:font-mono *:after:font-normal">
				<li>1. Default (no class)</li>
				<li className="font-sans">2. font-sans</li>
				<li className="font-[var(--font-geist-sans)]">
					3. font-[var(--font-geist-sans)]
				</li>
				<li className="font-(--font-geist-sans)">
					4. font-(--font-geist-sans)
				</li>
				<li className="font-(family-name:--font-geist-sans)">
					5. font-(family-name:--font-geist-sans)
				</li>
				<li className="font-[family-name:var(--font-geist-sans)]">
					6. font-[family-name:var(--font-geist-sans)]
				</li>
				<li className="font-geist-sans">7. font-geist-sans</li>
			</ul>
		</>
	);
}

globals.css

@import "tailwindcss";

@theme {
  /* --font-sans : var(--font-geist-sans), sans-serif; */
  /* --font-sans : Geist, sans-serif; */
  /* --font-geist-sans: var(--font-geist-sans); */
}

package.json

...
	"dependencies": {
		"react": "^19.0.0",
		"react-dom": "^19.0.0",
		"next": "15.1.6"
	},
	"devDependencies": {
		"@tailwindcss/postcss": "^4.0.0",
		"@types/node": "^20.17.16",
		"@types/react": "^19.0.8",
		"@types/react-dom": "^19.0.3",
		"postcss": "^8.5.1",
		"tailwindcss": "^4.0.0",
		"typescript": "^5.7.3"
	}
...

Repo : https://github.com/AliMejbar/test (with branches for each css property once enabled)
Preview : test-tw4-next15.vercel.app

wongjn · 2025-01-27T13:32:11Z

wongjn
Jan 27, 2025

This is due to how CSS variables are resolved. You could:

Add the variable to the <html>:

<html className="${geistSans.variable}">

Or use @theme inline with one of the properties as you have written above:
```
@theme inline {
```

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Apply custom font family tailwincss v4 / Next.js 15 #15923

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Apply custom font family tailwincss v4 / Next.js 15 #15923

AliMejbar Jan 27, 2025

Replies: 1 comment

wongjn Jan 27, 2025

AliMejbar
Jan 27, 2025

wongjn
Jan 27, 2025