From 6c41d1a68303ef81965f2627d3011e7e64e20a8e Mon Sep 17 00:00:00 2001 From: Raiondesu Date: Mon, 2 Mar 2026 06:08:27 +0200 Subject: [PATCH 1/2] Update font-family docs to include information about `--default-font-family`, fixes #2455 --- src/docs/font-family.mdx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/docs/font-family.mdx b/src/docs/font-family.mdx index 9af802b5c..e0501805a 100644 --- a/src/docs/font-family.mdx +++ b/src/docs/font-family.mdx @@ -116,4 +116,32 @@ If you're loading a font from a service like [Google Fonts](https://fonts.google Browsers require that `@import` statements come before any other rules, so URL imports need to be above imports like `@import "tailwindcss"` which are inlined in the compiled CSS. +### The default font family + +The above setup still requires you to apply the font-family using a utility class. + +To set a font family as the core default without needing to specify it on every element by using a utility class, set the `default-font-family` variable to the font-family of your choice: + +```css +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import "tailwindcss"; + +@theme { + --font-roboto: "Roboto", sans-serif; + --default-font-family: var(--font-roboto); /* [!code highlight] */ +} +``` + +Initially, [`default-font-family` is set to `font-sans`](https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css#L494) in Tailwind CSS, so it may be a good thing to include this value as a fallback in case the new default font fails to load: + +```css +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import "tailwindcss"; + +@theme { + --font-roboto: "Roboto", sans-serif; + --default-font-family: var(--font-roboto, var(--font-sans, initial)); /* [!code highlight] */ +} +``` + From be0c9335f6f265663f9b6018eb731e5591a96787 Mon Sep 17 00:00:00 2001 From: Raiondesu Date: Mon, 2 Mar 2026 06:09:38 +0200 Subject: [PATCH 2/2] Update theme.mdx to include info about `--default-font-family` to fix #2455 even more Add other default variables to the reference for completeness --- src/docs/theme.mdx | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/docs/theme.mdx b/src/docs/theme.mdx index ab46e738f..0576fe96d 100644 --- a/src/docs/theme.mdx +++ b/src/docs/theme.mdx @@ -407,6 +407,37 @@ When you do this, all of the default utilities that use that namespace _(like `b Learn more about how theme variables map to different utility classes and variants in the [theme variable namespaces](#theme-variable-namespaces) documentation. +### Overriding the default values + +There are several variables that allow to define a global default for a small set of values, bypassing the need to use a utility class for the corresponding properties: + +- `--default-font-family` +- `--default-mono-font-family` +- `--default-transition-duration` +- `--default-transition-timing-function` + +For example, to customize the default `font-family`, simply set the `--default-font-family` variable: + +```css +/* [!code filename:app.css] */ +@import "tailwindcss"; + +@theme { + --font-poppins: Poppins, sans-serif; + /* [!code highlight:2] */ + --default-font-family: var(--font-poppins, initial); +} +``` + +No need for a font-family utility class anymore: + +```html + +

This headline will use Poppins.

+``` + +Learn more about default theme variables in the [default theme variable reference](#default-theme-variable-reference) documentation. + ### Using a custom theme To completely disable the default theme and use only custom values, set the global theme variable namespace to `initial`: @@ -660,6 +691,13 @@ For reference, here's a complete list of the theme variables included by default --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --default-font-family: --theme(--font-sans, initial); + --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial); + --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial); + --default-mono-font-family: --theme(--font-mono, initial); + --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial); + --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial); + --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); @@ -1106,6 +1144,9 @@ For reference, here's a complete list of the theme variables included by default --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + @keyframes spin { to { transform: rotate(360deg);