diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a580ffd716c..49353b907fe8 100644 --- 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 index 133b27410310..a48e7a689835 100644 --- 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 index 273ef8e9c9c5..a48c2b1761fc 100644 --- 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 index 25eda0958156..384e698627ed 100644 --- 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 index 1ca45ab6a1c4..6d94aa8348d2 100644 --- 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 index 52ed303c1d15..aa8a9a620ee0 100644 --- 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 index 847126c872af..3d19c44771ef 100644 --- 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;