Skip to content

Don't crash when container padding uses a screen that isn't a breakpoint #20523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kwy404 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Don't crash when container padding uses a screen that isn't a breakpoint #20523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05eeca5
Don't crash when `container` padding uses a screen that isn't a break…
kwy404 Sep 27, 2026
9561619
Update changelog entry with PR number
kwy404 Sep 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) ([#20523](https://github.com/tailwindlabs/tailwindcss/pull/20523))

## [4.3.3] - 2026-07-16

Expand Down
10 changes: 10 additions & 0 deletions packages/tailwindcss/src/compat/container-config.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
},
},
Expand Down Expand Up @@ -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',
},
},
Expand Down Expand Up @@ -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;
Expand Down
9 changes: 7 additions & 2 deletions packages/tailwindcss/src/compat/container.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down