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
Collaborator

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

hexlabelposition · 2025-10-12T21:02:23Z

hexlabelposition
Oct 12, 2025

I use this method:

src/app/layout.tsx

import { Manrope } from 'next/font/google'
import { Inter } from 'next/font/google'
import { Figtree } from 'next/font/google'

import type { ReactNode } from 'react'

import './global.css'

const manrope = Manrope({
  variable: '--font-manrope',
  subsets: ['latin'],
  style: 'normal',
  display: 'swap',
  preload: true,
})

const inter = Inter({
  variable: '--font-inter',
  subsets: ['latin'],
  style: 'normal',
  display: 'swap',
  preload: true,
})

const figtree = Figtree({
  variable: '--font-figtree',
  subsets: ['latin'],
  style: 'normal',
  display: 'swap',
  preload: true,
})

interface RootLayoutProps {
  children: ReactNode
}

export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
  return (
    <html
      lang='en'
      data-scroll-behavior='smooth'
      className={`${manrope.variable} ${inter.variable} ${figtree.variable}`}
    >
      <body>{children}</body>
    </html>
  )
}

src/app/global.css

@import 'tailwindcss';

@theme {
  /* Manrope, Inter, and Figtree are passed from the root html tag as variables. */
  /* This is necessary for their optimization using Next.js. */
  --font-sans:
    var(--font-manrope), var(--font-inter), var(--font-figtree), ui-sans-serif,
    system-ui, sans-serif;
}

@layer base {
  html {
    @apply scroll-smooth font-sans antialiased;
  }
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

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

Uh oh!

AliMejbar Jan 27, 2025

Replies: 2 comments

Uh oh!

wongjn Jan 27, 2025 Collaborator

Uh oh!

hexlabelposition Oct 12, 2025

AliMejbar
Jan 27, 2025

wongjn
Jan 27, 2025
Collaborator

hexlabelposition
Oct 12, 2025