Use configured letter-spacing values for custom font-size utilities (#…

…15099)

Fixes #15096.

We were mistakenly reading from the `--tracking` sub-property but should
be reading from `--letter-spacing`.

To test this I copied the reproduction from the issue into our Vite
playground and made sure the custom letter-spacing was being applied as
expected:

<img width="1443" alt="image"
src="https://github.com/user-attachments/assets/bfc9ca23-bfc7-40d4-aec0-d3e715312eac">

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

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;
       }
     `,