Derive all font-weight values from theme (#14883)

This PR removes all of the static `font-weight` utilities that were previously hard-coded into the framework in favor of deriving those utilities from the `--font-weight-*` theme values instead. Biggest motivation for this is giving people a way to explicitly disable font-weight utilities they don't want to use in their project, which previously wasn't possible. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
tailwindlabs · Nov 5, 2024 · 8bd3c85 · 8bd3c85
1 parent 7175605
commit 8bd3c85
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880))
 - Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
 - Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))
+- Remove static `font-weight` utilities and add `--font-weight-*` values to the default theme ([#14883](https://github.com/tailwindlabs/tailwindcss/pull/14883))
 
 ## [4.0.0-alpha.31] - 2024-10-29
 

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -340,6 +340,15 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --font-size-8xl--line-height: 1;
     --font-size-9xl: 8rem;
     --font-size-9xl--line-height: 1;
+    --font-weight-thin: 100;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
     --letter-spacing-tighter: -.05em;
     --letter-spacing-tight: -.025em;
     --letter-spacing-normal: 0em;
@@ -555,8 +564,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   @media (width >= 96rem) {
     .\\32 xl\\:font-bold {
-      --tw-font-weight: 700;
-      font-weight: 700;
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
     }
   }
 }

diff --git a/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts b/packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts
@@ -90,7 +90,7 @@ test.each([
   ['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,var(--spacing-80))_auto]'],
 
   // `theme(…)` calls valid in v3, but not in v4 should still be converted.
-  ['[--foo:theme(fontWeight.semibold)]', '[--foo:theme(fontWeight.semibold)]'],
+  ['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'],
 
   // `screens` values
   ['max-w-[theme(screens.md)]', 'max-w-[var(--breakpoint-md)]'],

diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -339,6 +339,15 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --font-size-8xl--line-height: 1;
   --font-size-9xl: 8rem;
   --font-size-9xl--line-height: 1;
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
   --letter-spacing-tighter: -.05em;
   --letter-spacing-tight: -.025em;
   --letter-spacing-normal: 0em;

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -12375,11 +12375,6 @@ test('font', async () => {
       font-weight: var(--my-family);
     }
 
-    .font-bold {
-      --tw-font-weight: 700;
-      font-weight: 700;
-    }
-
     @supports (-moz-orient: inline) {
       @layer base {
         *, :before, :after, ::backdrop {
@@ -16430,7 +16425,7 @@ describe('custom utilities', () => {
           }
 
           @utility bar {
-            @apply dark:foo font-bold;
+            @apply dark:foo flex-wrap;
           }
 
           @tailwind utilities;
@@ -16439,8 +16434,7 @@ describe('custom utilities', () => {
       ),
     ).toMatchInlineSnapshot(`
       ".bar {
-        --tw-font-weight: 700;
-        font-weight: 700;
+        flex-wrap: wrap;
       }
 
       @media (prefers-color-scheme: dark) {
@@ -16449,19 +16443,6 @@ describe('custom utilities', () => {
           text-decoration-line: underline;
           display: flex;
         }
-      }
-
-      @supports (-moz-orient: inline) {
-        @layer base {
-          *, :before, :after, ::backdrop {
-            --tw-font-weight: initial;
-          }
-        }
-      }
-
-      @property --tw-font-weight {
-        syntax: "*";
-        inherits: false
       }"
     `)
   })
@@ -16471,7 +16452,7 @@ describe('custom utilities', () => {
       compileCss(
         css`
           @utility foo {
-            @apply font-bold hover:bar;
+            @apply flex-wrap hover:bar;
           }
 
           @utility bar {
@@ -16495,7 +16476,7 @@ describe('custom utilities', () => {
             .bar {
               .baz {
                 .qux {
-                  @apply font-bold hover:bar;
+                  @apply flex-wrap hover:bar;
                 }
               }
             }

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -2801,44 +2801,6 @@ export function createUtilities(theme: Theme) {
           decl('font-weight', value),
         ]
       }
-
-      switch (candidate.value.value) {
-        case 'thin':
-          value = '100'
-          break
-        case 'extralight':
-          value = '200'
-          break
-        case 'light':
-          value = '300'
-          break
-        case 'normal':
-          value = '400'
-          break
-        case 'medium':
-          value = '500'
-          break
-        case 'semibold':
-          value = '600'
-          break
-        case 'bold':
-          value = '700'
-          break
-        case 'extrabold':
-          value = '800'
-          break
-        case 'black':
-          value = '900'
-          break
-      }
-
-      if (value) {
-        return [
-          atRoot([property('--tw-font-weight')]),
-          decl('--tw-font-weight', value),
-          decl('font-weight', value),
-        ]
-      }
     }
   })
 

diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
@@ -386,6 +386,17 @@
   --font-size-9xl: 8rem;
   --font-size-9xl--line-height: 1;
 
+  /* Font weights */
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
   /* Letter spacing */
   --letter-spacing-tighter: -0.05em;
   --letter-spacing-tight: -0.025em;