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

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',

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;
+}