tailwindcss-font weekly downloads statistics

TailwindCSS Font

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

Installation

Apply the plugin

Install the package:

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

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

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:

Features

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

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.

License

MIT

Description from the npm listing.