From 05eeca593828e6be4317ffdcae24e77e13a1e773 Mon Sep 17 00:00:00 2001 From: kwy404 Date: Sat, 26 Sep 2026 22:44:41 -0300 Subject: [PATCH 1/2] Don't crash when `container` padding uses a screen that isn't a breakpoint --- CHANGELOG.md | 1 + .../tailwindcss/src/compat/container-config.test.ts | 10 ++++++++++ packages/tailwindcss/src/compat/container.ts | 9 +++++++-- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e5e6f6f89805..c4850767fe51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Sort `min-*`, `max-*`, and container query variants with decimal values numerically (e.g. `min-[40.25rem]` before `min-[40.5rem]`) ([#20512](https://github.com/tailwindlabs/tailwindcss/pull/20512)) - Ensure CSS comments ending with `\*/` are closed correctly instead of swallowing the CSS that follows (e.g. `/* C:\temp\*/`) ([#20508](https://github.com/tailwindlabs/tailwindcss/pull/20508)) - Improve style invalidation performance of `group-*` and `peer-*` variants ([#20513](https://github.com/tailwindlabs/tailwindcss/pull/20513)) +- Don't crash when the legacy `container` config has `padding` for a screen that isn't a breakpoint (e.g. a custom `container.screens` entry) ([#XXXXX](https://github.com/tailwindlabs/tailwindcss/pull/XXXXX)) ## [4.3.3] - 2026-07-16 diff --git a/packages/tailwindcss/src/compat/container-config.test.ts b/packages/tailwindcss/src/compat/container-config.test.ts index 39a12557c676..d83b7d2697f6 100644 --- a/packages/tailwindcss/src/compat/container-config.test.ts +++ b/packages/tailwindcss/src/compat/container-config.test.ts @@ -102,6 +102,7 @@ test('allows padding to be defined at custom breakpoints', async () => { '2xl': '3rem', DEFAULT: '1rem', lg: '2rem', + xs: '0.5rem', // Not a breakpoint, so it is ignored }, }, }, @@ -278,8 +279,10 @@ test('padding applies to custom `container` screens', async () => { padding: { sm: '2rem', md: '3rem', + xs: '1rem', }, screens: { + xs: '30rem', // Not a default --breakpoint md: '48rem', }, }, @@ -332,6 +335,13 @@ test('padding applies to custom `container` screens', async () => { } } + @media (min-width: 30rem) { + .container { + max-width: 30rem; + padding-inline: 1rem; + } + } + @media (min-width: 48rem) { .container { max-width: 48rem; diff --git a/packages/tailwindcss/src/compat/container.ts b/packages/tailwindcss/src/compat/container.ts index 98f23ce7a1c6..765f99f9a6ee 100644 --- a/packages/tailwindcss/src/compat/container.ts +++ b/packages/tailwindcss/src/compat/container.ts @@ -89,8 +89,13 @@ export function buildCustomContainerUtilityRules( .map(([key, value]) => { return [key, designSystem.theme.resolveValue(key, ['--breakpoint']), value] }) - .filter(Boolean) as [string, string, string][] - breakpoints.sort((a, z) => compareBreakpoints(a[1], z[1], 'asc')) + .filter(([key, breakpoint]) => { + // Skip keys that are neither a breakpoint nor a custom `container` screen + return breakpoint !== null || breakpointOverwrites?.has(key) + }) as [string, string, string][] + + // Padding for custom `container` screens is added to their own rule, so no sorting is needed + if (!breakpointOverwrites) breakpoints.sort((a, z) => compareBreakpoints(a[1], z[1], 'asc')) for (let [key, , value] of breakpoints) { if (breakpointOverwrites && breakpointOverwrites.has(key)) { From 9561619c77b9cb085026e0919e276888803b76a5 Mon Sep 17 00:00:00 2001 From: kwy404 Date: Sat, 26 Sep 2026 23:47:30 -0300 Subject: [PATCH 2/2] Update changelog entry with PR number --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c4850767fe51..f51f3180e027 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,7 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Sort `min-*`, `max-*`, and container query variants with decimal values numerically (e.g. `min-[40.25rem]` before `min-[40.5rem]`) ([#20512](https://github.com/tailwindlabs/tailwindcss/pull/20512)) - Ensure CSS comments ending with `\*/` are closed correctly instead of swallowing the CSS that follows (e.g. `/* C:\temp\*/`) ([#20508](https://github.com/tailwindlabs/tailwindcss/pull/20508)) - Improve style invalidation performance of `group-*` and `peer-*` variants ([#20513](https://github.com/tailwindlabs/tailwindcss/pull/20513)) -- Don't crash when the legacy `container` config has `padding` for a screen that isn't a breakpoint (e.g. a custom `container.screens` entry) ([#XXXXX](https://github.com/tailwindlabs/tailwindcss/pull/XXXXX)) +- Don't crash when the legacy `container` config has `padding` for a screen that isn't a breakpoint (e.g. a custom `container.screens` entry) ([#20523](https://github.com/tailwindlabs/tailwindcss/pull/20523)) ## [4.3.3] - 2026-07-16