Rename --font-family-* variables to --font-*#14885
Merged
Merged
Conversation
philipp-spiess
approved these changes
Nov 6, 2024
adamwathan
force-pushed
the
change/rename-font-family-variables-to-font
branch
from
7012ddd to
e2b3021
Compare
tkmcc
added a commit
to tkmcc/ui
that referenced
this pull request
Nov 19, 2024
Update docs to reflect change in upstream Tailwind CSS v4, see tailwindlabs/tailwindcss#14885
8 tasks
waynegibson
added a commit
to waynegibson/fonts
that referenced
this pull request
Dec 5, 2024
TailwindCSS v4 had an update to the way you configure theme fonts variables. See this pull request tailwindlabs/tailwindcss#14885
This was referenced Dec 5, 2024
This was referenced Apr 15, 2026
This was referenced Apr 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR renames the
--font-family-*theme variables to--font-*to more closely match the utility names and be a bit more terse in general.@theme { - --font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --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; }This is part of a bigger set of changes where we're renaming other theme variables as well with the same goals, since many existing theme variables like
--shadow-*and--radius-*are already not using the explicit CSS property name.