next.jstailwind-css

I want to customize fonts in Tailwind v4 but it doesn't seem to work

Below is the global.css file

@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

@import "tailwindcss";

@theme {
  --primaryFont: "Arima", system-ui;
}

Below is my page.js file where I am applying the custom fonts. The custom fonts doesn't work with name primaryFont.

import Link from "next/link";
import { navLinks } from "./data";
// /pages/single

export default function Home() {
  return (
    <div className="font-primaryFont">
      {navLinks.map((link, idx) => (
        <Link href={`./pages/single/${link.name}`} key={idx} className="p-4">
          {link.imageUrl}
        </Link>
      ))}
    </div>
  );
}
Solution

  • As per the documentation, you'd need to prefix the CSS variable name with font-:

    @theme {
  --font-primaryFont: "Arima", system-ui;
}


    <script src="https://unpkg.com/@tailwindcss/browser@4.1.5"></script>

<style type="text/tailwindcss">
@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

@import "tailwindcss";

@theme {
  --font-primaryFont: "Arima", system-ui;
}
</style>

<div id="app"></div>

<script src="https://unpkg.com/@babel/standalone@7.27.1"></script>
<script type="text/babel" data-type="module">
  import React from "https://esm.sh/react@19.1.0";
  import ReactDOM from "https://esm.sh/react-dom@19.1.0/client";

  // import Link from "next/link";
  // import { navLinks } from "./data";
  // /pages/single
  
  const Link = (props) => <a {...props} />
  const navLinks = [
    {
      name: 'foo',
      imageUrl: '/foo',
    },
    {
      name: 'bar',
      imageUrl: '/bar',
    },
    {
      name: 'baz',
      imageUrl: '/baz',
    },
  ];

  function Home() {
    return (
      <div className="font-primaryFont">
        {navLinks.map((link, idx) => (
          <Link href={`./pages/single/${link.name}`} key={idx} className="p-4">
            {link.imageUrl}
          </Link>
        ))}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('app')).render(<Home/>);
</script>