Tailwindcss-font NPM

TailwindCSS Font

A TailwindCSS plugin that provides a convenient API for using custom fonts with CSS variables.

Installation

Apply the plugin

Install the package:

npm install -D tailwindcss-font

Add the plugin to your TailwindCSS configuration and specify your fonts:

// tailwind.config.js
module.exports = {
  // …
  plugins: [
    require("tailwindcss-font")({
      sans: ["Inter"],
      serif: ["Playfair Display"],
    }),
  ],
};

The above configuration will generate the following CSS variables and corresponding TailwindCSS font-* classes:

html {
  --tw-font-inter: "Inter";
  --tw-font-playfair-display: "Playfair Display";
}
.font-sans {
  font-family: var(--tw-font-inter), /* … sans font stack */;
}
.font-serif {
  font-family: var(--tw-font-playfair-display), /* … serif font stack */;
}

Load the fonts

It's up to you how to load the fonts and assign them to the CSS variables.

For example, in Next.js 13+, you can use next/font with corresponding variable values:

import { Inter, Playfair_Display } from "next/font/google";

const inter = Inter({
  variable: "--tw-font-inter",
  subsets: ["latin"],
});

const playfairDisplay = Playfair_Display({
  variable: "--tw-font-playfair-display",
  subsets: ["latin"],
});

export default function Layout({ children }: React.PropsWithChildren) {
  return (
    <html className={`${inter.variable} ${playfairDisplay.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Features

You can specify as many fonts as you'd like to, just add them to the plugin options:

require("tailwindcss-font")({
  mono: ["JetBrains Mono"],
  display: ["Cabinet Grotesk"],
  quote: ["Cormorant Garamond", "serif"],
});

Automatic font stack

The plugin automatically appends the sans, serif, and mono font stacks to the font families, so you don't have to specify them.

For non-default font, the sans font stack is appended by default, you can override it by specifying either sans, serif, or mono in your font stack, they'll be replaced with the corresponding font stack. For example, in the above configuration, the quote font stack will be "Cormorant Garamond", /* serif font stack */.

Automatic `font-*` classes

The key of the font makes the TailwindCSS font-${key} class. For example, in the above configuration, you can use font-mono, font-display, and font-quote to apply the corresponding fonts.

Automatic CSS variables

Each unique font family will generate a corresponding CSS variable in kebab-case style, for example, Cormorant Garamond becomes --tw-font-cormorant-garamond.