Rename --font-size-* variables to --text-* (#14909)

This PR updates all of the `--font-size-*` variables to `--text-*`
instead to closer match the utility names.

```diff
  @theme {
-   --font-size-xs: 0.75rem;
-   --font-size-xs--line-height: 1rem;
-   --font-size-sm: 0.875rem;
-   --font-size-sm--line-height: 1.25rem;
-   --font-size-base: 1rem;
-   --font-size-base--line-height: 1.5rem;
-   --font-size-lg: 1.125rem;
-   --font-size-lg--line-height: 1.75rem;
-   --font-size-xl: 1.25rem;
-   --font-size-xl--line-height: 1.75rem;

    /* ... */
  
+   --text-xs: 0.75rem;
+   --text-xs--line-height: 1rem;
+   --text-sm: 0.875rem;
+   --text-sm--line-height: 1.25rem;
+   --text-base: 1rem;
+   --text-base--line-height: 1.5rem;
+   --text-lg: 1.125rem;
+   --text-lg--line-height: 1.75rem;
+   --text-xl: 1.25rem;
+   --text-xl--line-height: 1.75rem;

    /* ... */
  }
```

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.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>

CHANGELOG.md

@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove static `font-weight` utilities and add `--font-weight-*` values to the default theme ([#14883](https://github.com/tailwindlabs/tailwindcss/pull/14883))
 - Rename `--transition-timing-function-*` variables to `--ease-*` ([#14886](https://github.com/tailwindlabs/tailwindcss/pull/14886))
 - Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
+- Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
 
 ## [4.0.0-alpha.31] - 2024-10-29
 

integrations/upgrade/js-config.test.ts

@@ -158,13 +158,13 @@ test(
         --color-red-500: #ef4444;
         --color-red-600: #dc2626;
 
-        --font-size-*: initial;
-        --font-size-xs: 0.75rem;
-        --font-size-xs--line-height: 1rem;
-        --font-size-sm: 0.875rem;
-        --font-size-sm--line-height: 1.5rem;
-        --font-size-base: 1rem;
-        --font-size-base--line-height: 2rem;
+        --text-*: initial;
+        --text-xs: 0.75rem;
+        --text-xs--line-height: 1rem;
+        --text-sm: 0.875rem;
+        --text-sm--line-height: 1.5rem;
+        --text-base: 1rem;
+        --text-base--line-height: 2rem;
 
         --width-*: initial;
         --width-0: 0%;

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -314,32 +314,32 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --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;
-    --font-size-xs: .75rem;
-    --font-size-xs--line-height: 1rem;
-    --font-size-sm: .875rem;
-    --font-size-sm--line-height: 1.25rem;
-    --font-size-base: 1rem;
-    --font-size-base--line-height: 1.5rem;
-    --font-size-lg: 1.125rem;
-    --font-size-lg--line-height: 1.75rem;
-    --font-size-xl: 1.25rem;
-    --font-size-xl--line-height: 1.75rem;
-    --font-size-2xl: 1.5rem;
-    --font-size-2xl--line-height: 2rem;
-    --font-size-3xl: 1.875rem;
-    --font-size-3xl--line-height: 2.25rem;
-    --font-size-4xl: 2.25rem;
-    --font-size-4xl--line-height: 2.5rem;
-    --font-size-5xl: 3rem;
-    --font-size-5xl--line-height: 1;
-    --font-size-6xl: 3.75rem;
-    --font-size-6xl--line-height: 1;
-    --font-size-7xl: 4.5rem;
-    --font-size-7xl--line-height: 1;
-    --font-size-8xl: 6rem;
-    --font-size-8xl--line-height: 1;
-    --font-size-9xl: 8rem;
-    --font-size-9xl--line-height: 1;
+    --text-xs: .75rem;
+    --text-xs--line-height: 1rem;
+    --text-sm: .875rem;
+    --text-sm--line-height: 1.25rem;
+    --text-base: 1rem;
+    --text-base--line-height: 1.5rem;
+    --text-lg: 1.125rem;
+    --text-lg--line-height: 1.75rem;
+    --text-xl: 1.25rem;
+    --text-xl--line-height: 1.75rem;
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: 2rem;
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: 2.25rem;
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: 2.5rem;
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
     --font-weight-thin: 100;
     --font-weight-extralight: 200;
     --font-weight-light: 300;
@@ -551,8 +551,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
 @layer utilities {
   .text-2xl {
-    font-size: var(--font-size-2xl);
-    line-height: var(--tw-leading, var(--font-size-2xl--line-height));
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
 
   .text-black\\/50 {

packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts

@@ -10,7 +10,7 @@ test.each([
 
   // Handle special cases around `.1` in the `theme(…)`
   ['[--value:theme(spacing.1)]', '[--value:var(--spacing-1)]'],
-  ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--font-size-xs--line-height)]'],
+  ['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--text-xs--line-height)]'],
 
   // Convert to `var(…)` if we can resolve the path
   ['[color:theme(colors.red.500)]', '[color:var(--color-red-500)]'], // Arbitrary property
@@ -32,7 +32,7 @@ test.each([
   ],
 
   // Use `theme(…)` (deeply nested) inside of a `calc(…)` function
-  ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--font-size-xs)*2)]'],
+  ['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--text-xs)*2)]'],
 
   // Multiple `theme(… / …)` calls should result in modern syntax of `theme(…)`
   // - Can't convert to `var(…)` because that would lose the modifier.

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -313,32 +313,32 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --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;
-  --font-size-xs: .75rem;
-  --font-size-xs--line-height: 1rem;
-  --font-size-sm: .875rem;
-  --font-size-sm--line-height: 1.25rem;
-  --font-size-base: 1rem;
-  --font-size-base--line-height: 1.5rem;
-  --font-size-lg: 1.125rem;
-  --font-size-lg--line-height: 1.75rem;
-  --font-size-xl: 1.25rem;
-  --font-size-xl--line-height: 1.75rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-2xl--line-height: 2rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-3xl--line-height: 2.25rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-4xl--line-height: 2.5rem;
-  --font-size-5xl: 3rem;
-  --font-size-5xl--line-height: 1;
-  --font-size-6xl: 3.75rem;
-  --font-size-6xl--line-height: 1;
-  --font-size-7xl: 4.5rem;
-  --font-size-7xl--line-height: 1;
-  --font-size-8xl: 6rem;
-  --font-size-8xl--line-height: 1;
-  --font-size-9xl: 8rem;
-  --font-size-9xl--line-height: 1;
+  --text-xs: .75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: .875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
   --font-weight-thin: 100;
   --font-weight-extralight: 200;
   --font-weight-light: 300;

packages/tailwindcss/src/compat/apply-config-to-theme.test.ts

@@ -82,9 +82,9 @@ test('config values can be merged into the theme', () => {
     'Potato Mono',
     { '--font-variation-settings': '"XHGT" 0.7' },
   ])
-  expect(theme.resolve('sm', ['--font-size'])).toEqual('0.875rem')
-  expect(theme.resolve('base', ['--font-size'])).toEqual('1rem')
-  expect(theme.resolveWith('base', ['--font-size'], ['--line-height'])).toEqual([
+  expect(theme.resolve('sm', ['--text'])).toEqual('0.875rem')
+  expect(theme.resolve('base', ['--text'])).toEqual('1rem')
+  expect(theme.resolveWith('base', ['--text'], ['--line-height'])).toEqual([
     '1rem',
     { '--line-height': '1.5' },
   ])

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -128,13 +128,16 @@ export function themeableValues(config: ResolvedConfig['theme']): [string[], unk
 const IS_VALID_KEY = /^[a-zA-Z0-9-_%/\.]+$/
 
 export function keyPathToCssProperty(path: string[]) {
+  path = structuredClone(path)
+
   if (path[0] === 'colors') path[0] = 'color'
   if (path[0] === 'screens') path[0] = 'breakpoint'
   if (path[0] === 'borderRadius') path[0] = 'radius'
   if (path[0] === 'boxShadow') path[0] = 'shadow'
   if (path[0] === 'animation') path[0] = 'animate'
   if (path[0] === 'transitionTimingFunction') path[0] = 'ease'
   if (path[0] === 'fontFamily') path[0] = 'font'
+  if (path[0] === 'fontSize') path[0] = 'text'
   if (path[0] === 'maxWidth') path[0] = 'container'
 
   for (let part of path) {

packages/tailwindcss/src/compat/config.test.ts

@@ -255,16 +255,16 @@ describe('theme callbacks', () => {
   }) => {
     let input = css`
       @theme default {
-        --font-size-base: 0rem;
-        --font-size-base--line-height: 1rem;
-        --font-size-md: 0rem;
-        --font-size-md--line-height: 1rem;
-        --font-size-xl: 0rem;
-        --font-size-xl--line-height: 1rem;
+        --text-base: 0rem;
+        --text-base--line-height: 1rem;
+        --text-md: 0rem;
+        --text-md--line-height: 1rem;
+        --text-xl: 0rem;
+        --text-xl--line-height: 1rem;
       }
       @theme {
-        --font-size-base: 100rem;
-        --font-size-md--line-height: 101rem;
+        --text-base: 100rem;
+        --text-md--line-height: 101rem;
       }
       @tailwind utilities;
       @config "./config.js";
@@ -323,8 +323,8 @@ describe('theme callbacks', () => {
     expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
       .toMatchInlineSnapshot(`
         ":root {
-          --font-size-base: 100rem;
-          --font-size-md--line-height: 101rem;
+          --text-base: 100rem;
+          --text-md--line-height: 101rem;
         }
         .prose {
           [class~=lead-base] {

packages/tailwindcss/src/compat/config/create-compat-config.ts

@@ -14,6 +14,10 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
       colors: ({ theme }) => theme('color', {}),
 
       extend: {
+        fontSize: ({ theme }) => ({
+          ...theme('text', {}),
+        }),
+
         boxShadow: ({ theme }) => ({
           ...theme('shadow', {}),
         }),

packages/tailwindcss/src/compat/flatten-color-palette.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from 'vitest'
+import { flattenColorPalette } from './flatten-color-palette'
+
+test('it should handle private __CSS_VALUES__ to resolve to the right value', () => {
+  expect(
+    flattenColorPalette({
+      'slate-100': '#000100',
+      'slate-200': '#000200',
+      'slate-300': '#000300',
+      'slate-400': '#100400',
+      'slate-500': '#100500',
+      __CSS_VALUES__: {
+        'slate-100': 4,
+        'slate-200': 4,
+        'slate-300': 4,
+        'slate-400': 0,
+        'slate-500': 0,
+      } as any,
+      slate: { '200': '#200200', '400': '#200400', '600': '#200600' },
+      'slate-600': '#200600',
+    }),
+  ).toMatchInlineSnapshot(`
+    {
+      "slate-100": "#000100",
+      "slate-200": "#200200",
+      "slate-300": "#000300",
+      "slate-400": "#100400",
+      "slate-500": "#100500",
+      "slate-600": "#200600",
+    }
+  `)
+})

packages/tailwindcss/src/compat/flatten-color-palette.ts

@@ -1,3 +1,5 @@
+import { ThemeOptions } from '../theme'
+
 type Colors = {
   [key: string | number]: string | Colors
 }
@@ -6,6 +8,7 @@ export function flattenColorPalette(colors: Colors) {
   let result: Record<string, string> = {}
 
   for (let [root, children] of Object.entries(colors ?? {})) {
+    if (root === '__CSS_VALUES__') continue
     if (typeof children === 'object' && children !== null) {
       for (let [parent, value] of Object.entries(flattenColorPalette(children))) {
         result[`${root}${parent === 'DEFAULT' ? '' : `-${parent}`}`] = value
@@ -15,5 +18,13 @@ export function flattenColorPalette(colors: Colors) {
     }
   }
 
+  if ('__CSS_VALUES__' in colors) {
+    for (let [key, value] of Object.entries(colors.__CSS_VALUES__)) {
+      if ((Number(value) & ThemeOptions.DEFAULT) === 0) {
+        result[key] = colors[key] as string
+      }
+    }
+  }
+
   return result
 }

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -401,8 +401,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme reference {
-        --animation: pulse 1s linear infinite;
-        --animation-spin: spin 1s linear infinite;
+        --animate: pulse 1s linear infinite;
+        --animate-spin: spin 1s linear infinite;
       }
     `
 
@@ -459,8 +459,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme reference {
-        --animation: pulse 1s linear infinite;
-        --animation-spin: spin 1s linear infinite;
+        --animate: pulse 1s linear infinite;
+        --animate-spin: spin 1s linear infinite;
       }
     `
 
@@ -513,8 +513,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme reference {
-        --animation: pulse 1s linear infinite;
-        --animation-spin: spin 1s linear infinite;
+        --animate: pulse 1s linear infinite;
+        --animate-spin: spin 1s linear infinite;
       }
     `
 
@@ -560,8 +560,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme reference {
-        --animation-simple-spin: spin 1s linear infinite;
-        --animation-simple-bounce: bounce 1s linear infinite;
+        --animate-simple-spin: spin 1s linear infinite;
+        --animate-simple-bounce: bounce 1s linear infinite;
       }
     `
 
@@ -884,8 +884,8 @@ describe('theme', async () => {
       @tailwind utilities;
       @plugin "my-plugin";
       @theme {
-        --transition-timing-function-in: ease-in;
-        --transition-timing-function-out: ease-out;
+        --ease-in: ease-in;
+        --ease-out: ease-out;
       }
     `
 

packages/tailwindcss/src/compat/plugin-functions.ts

@@ -4,6 +4,7 @@ import { withAlpha } from '../utilities'
 import { DefaultMap } from '../utils/default-map'
 import { unescape } from '../utils/escape'
 import { toKeyPath } from '../utils/to-key-path'
+import { keyPathToCssProperty } from './apply-config-to-theme'
 import { deepMerge } from './config/deep-merge'
 import type { UserConfig } from './config/types'
 
@@ -127,21 +128,7 @@ function readFromCss(
     // A nested tuple with additional data
     | [main: string, extra: Record<string, string>]
 
-  let themeKey = path
-    // [1] should move into the nested object tuple. To create the CSS variable
-    // name for this, we replace it with an empty string that will result in two
-    // subsequent dashes when joined.
-    .map((path) => (path === '1' ? '' : path))
-
-    // Resolve the key path to a CSS variable segment
-    .map((part) =>
-      part.replaceAll('.', '_').replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`),
-    )
-
-    // Remove the `DEFAULT` key at the end of a path
-    // We're reading from CSS anyway so it'll be a string
-    .filter((part, index) => part !== 'DEFAULT' || index !== path.length - 1)
-    .join('-')
+  let themeKey = keyPathToCssProperty(path)
 
   let map = new Map<string | null, ThemeValue>()
   let nested = new DefaultMap<string | null, Map<string, [value: string, options: number]>>(