tailwindcss-font
v0.0.5
Published
A TailwindCSS plugin for using custom fonts with CSS variables
Downloads
18
Maintainers
phuctm97Readme
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-fontAdd 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.
License
MIT