Use configured letter-spacing values for custom font-size utilities

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
 
 ## [4.0.0-beta.1] - 2024-11-21
 

packages/tailwindcss/src/utilities.ts

@@ -4033,7 +4033,7 @@ export function createUtilities(theme: Theme) {
       let value = theme.resolveWith(
         candidate.value.value,
         ['--text'],
-        ['--line-height', '--tracking', '--font-weight'],
+        ['--line-height', '--letter-spacing', '--font-weight'],
       )
       if (value) {
         let [fontSize, options = {}] = Array.isArray(value) ? value : [value]
@@ -4067,7 +4067,9 @@ export function createUtilities(theme: Theme) {
           ),
           decl(
             'letter-spacing',
-            options['--tracking'] ? `var(--tw-tracking, ${options['--tracking']})` : undefined,
+            options['--letter-spacing']
+              ? `var(--tw-tracking, ${options['--letter-spacing']})`
+              : undefined,
           ),
           decl(
             'font-weight',

packages/tailwindcss/tests/ui.spec.ts

@@ -568,8 +568,8 @@ test('explicit tracking utilities are respected when overriding font-size', asyn
     `,
     css`
       @theme {
-        --text-sm--tracking: 5px;
-        --text-xl--tracking: 10px;
+        --text-sm--letter-spacing: 5px;
+        --text-xl--letter-spacing: 10px;
         --tracking-tight: 1px;
       }
     `,

playgrounds/vite/src/app.tsx

@@ -1,7 +1,7 @@
 export function App() {
   return (
     <div className="m-3 p-3 border">
-      <h1 className="text-blue-500">Hello World</h1>
+      <h1 className="text-heading3xl">Hello World</h1>
       <div className="-inset-x-full -inset-y-full -space-x-full -space-y-full -inset-full"></div>
     </div>
   )

playgrounds/vite/src/index.css

@@ -1 +1,8 @@
 @import 'tailwindcss';
+
+@theme {
+  --text-heading3xl: 2.25rem;
+  --text-heading3xl--line-height: 3rem;
+  --text-heading3xl--font-weight: 700;
+  --text-heading3xl--letter-spacing: -0.08375rem;
+}