Skip to content

Commit 5a974cd

Browse files
philipp-spiessadamwathan
philipp-spiess
and
adamwathan
authored
Bring back max-w-screen-* utilities (#15013)
This PR brings back the `max-w-screen-*` utilities from v3 that read from the `--breakpoint` namespace. Since these utilities are only added back for compatibility reasons, it's put into the compatibility layer. Note that this does not do Intellisense recommendations for the functional utility. ## Test Plan Unit tests are upgraded including some from the compat test that extends the `--breakpoint` namespace from `screen` keys. Also tested this in the Vite playground. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
1 parent b0a539a commit 5a974cd

File tree

8 files changed

+172
-75
lines changed

8 files changed

+172
-75
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1616

1717
- Bring back support for color opacity modifiers to read from `--opacity-*` theme values ([#14278](https://github.com/tailwindlabs/tailwindcss/pull/14278))
1818

19+
### Added
20+
21+
- Reintroduce `max-w-screen-*` utilities that read from the `--breakpoint` namespace as deprecated utilities ([#15013](https://github.com/tailwindlabs/tailwindcss/pull/15013))
22+
1923
## [4.0.0-alpha.34] - 2024-11-14
2024

2125
### Added

‎packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1957,14 +1957,6 @@ exports[`getClassList 1`] = `
19571957
"bg-current/95",
19581958
"bg-current/100",
19591959
"bg-fixed",
1960-
"bg-gradient-to-b",
1961-
"bg-gradient-to-bl",
1962-
"bg-gradient-to-br",
1963-
"bg-gradient-to-l",
1964-
"bg-gradient-to-r",
1965-
"bg-gradient-to-t",
1966-
"bg-gradient-to-tl",
1967-
"bg-gradient-to-tr",
19681960
"bg-inherit",
19691961
"bg-inherit/0",
19701962
"bg-inherit/5",

‎packages/tailwindcss/src/compat/apply-compat-hooks.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { resolveConfig } from './config/resolve-config'
88
import type { UserConfig } from './config/types'
99
import { registerContainerCompat } from './container'
1010
import { darkModePlugin } from './dark-mode'
11+
import { registerLegacyUtilities } from './legacy-utilities'
1112
import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api'
1213
import { registerScreensConfig } from './screens-config'
1314
import { registerThemeVariantOverrides } from './theme-variants'
@@ -116,6 +117,8 @@ export async function applyCompatibilityHooks({
116117
}
117118
})
118119

120+
registerLegacyUtilities(designSystem)
121+
119122
// Override `resolveThemeValue` with a version that is backwards compatible
120123
// with dot notation paths like `colors.red.500`. We could do this by default
121124
// in `resolveThemeValue` but handling it here keeps all backwards

‎packages/tailwindcss/src/compat/legacy-utilities.test.ts

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import { expect, test } from 'vitest'
2+
import { compileCss, run } from '../test-utils/run'
3+
4+
const css = String.raw
5+
6+
test('bg-gradient-*', async () => {
7+
expect(
8+
await compileCss(
9+
css`
10+
@tailwind utilities;
11+
`,
12+
[
13+
'bg-gradient-to-t',
14+
'bg-gradient-to-tr',
15+
'bg-gradient-to-r',
16+
'bg-gradient-to-br',
17+
'bg-gradient-to-b',
18+
'bg-gradient-to-bl',
19+
'bg-gradient-to-l',
20+
'bg-gradient-to-tl',
21+
],
22+
),
23+
).toMatchInlineSnapshot(`
24+
".bg-gradient-to-b {
25+
--tw-gradient-position: to bottom in oklch, ;
26+
background-image: linear-gradient(var(--tw-gradient-stops));
27+
}
28+
29+
.bg-gradient-to-bl {
30+
--tw-gradient-position: to bottom left in oklch, ;
31+
background-image: linear-gradient(var(--tw-gradient-stops));
32+
}
33+
34+
.bg-gradient-to-br {
35+
--tw-gradient-position: to bottom right in oklch, ;
36+
background-image: linear-gradient(var(--tw-gradient-stops));
37+
}
38+
39+
.bg-gradient-to-l {
40+
--tw-gradient-position: to left in oklch, ;
41+
background-image: linear-gradient(var(--tw-gradient-stops));
42+
}
43+
44+
.bg-gradient-to-r {
45+
--tw-gradient-position: to right in oklch, ;
46+
background-image: linear-gradient(var(--tw-gradient-stops));
47+
}
48+
49+
.bg-gradient-to-t {
50+
--tw-gradient-position: to top in oklch, ;
51+
background-image: linear-gradient(var(--tw-gradient-stops));
52+
}
53+
54+
.bg-gradient-to-tl {
55+
--tw-gradient-position: to top left in oklch, ;
56+
background-image: linear-gradient(var(--tw-gradient-stops));
57+
}
58+
59+
.bg-gradient-to-tr {
60+
--tw-gradient-position: to top right in oklch, ;
61+
background-image: linear-gradient(var(--tw-gradient-stops));
62+
}"
63+
`)
64+
})
65+
66+
test('max-w-screen', async () => {
67+
expect(
68+
await compileCss(
69+
css`
70+
@theme {
71+
--breakpoint-sm: 40rem;
72+
--breakpoint-md: 48rem;
73+
--breakpoint-lg: 64rem;
74+
--breakpoint-xl: 80rem;
75+
--breakpoint-2xl: 96rem;
76+
}
77+
@tailwind utilities;
78+
`,
79+
[
80+
'max-w-screen-sm',
81+
'max-w-screen-md',
82+
'max-w-screen-lg',
83+
'max-w-screen-xl',
84+
'max-w-screen-2xl',
85+
],
86+
),
87+
).toMatchInlineSnapshot(`
88+
":root {
89+
--breakpoint-sm: 40rem;
90+
--breakpoint-md: 48rem;
91+
--breakpoint-lg: 64rem;
92+
--breakpoint-xl: 80rem;
93+
--breakpoint-2xl: 96rem;
94+
}
95+
96+
.max-w-screen-2xl {
97+
max-width: var(--breakpoint-2xl);
98+
}
99+
100+
.max-w-screen-lg {
101+
max-width: var(--breakpoint-lg);
102+
}
103+
104+
.max-w-screen-md {
105+
max-width: var(--breakpoint-md);
106+
}
107+
108+
.max-w-screen-sm {
109+
max-width: var(--breakpoint-sm);
110+
}
111+
112+
.max-w-screen-xl {
113+
max-width: var(--breakpoint-xl);
114+
}"
115+
`)
116+
expect(
117+
await run([
118+
'max-w-screen-oh',
119+
'max-w-screen-4',
120+
'max-w-screen-[4px]',
121+
'-max-w-screen-sm',
122+
'-max-w-screen-[4px]',
123+
'max-w-screen-none/foo',
124+
'max-w-screen-full/foo',
125+
'max-w-screen-max/foo',
126+
'max-w-screen-max/foo',
127+
'max-w-screen-fit/foo',
128+
'max-w-screen-4/foo',
129+
'max-w-screen-xl/foo',
130+
'max-w-screen-[4px]/foo',
131+
]),
132+
).toEqual('')
133+
})

‎packages/tailwindcss/src/compat/legacy-utilities.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { decl } from '../ast'
2+
import type { DesignSystem } from '../design-system'
3+
4+
export function registerLegacyUtilities(designSystem: DesignSystem) {
5+
for (let [value, direction] of [
6+
['t', 'top'],
7+
['tr', 'top right'],
8+
['r', 'right'],
9+
['br', 'bottom right'],
10+
['b', 'bottom'],
11+
['bl', 'bottom left'],
12+
['l', 'left'],
13+
['tl', 'top left'],
14+
]) {
15+
designSystem.utilities.static(`bg-gradient-to-${value}`, () => [
16+
decl('--tw-gradient-position', `to ${direction} in oklch,`),
17+
decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
18+
])
19+
}
20+
21+
designSystem.utilities.functional('max-w-screen', (candidate) => {
22+
if (!candidate.value) return
23+
if (candidate.value.kind === 'arbitrary') return
24+
let value = designSystem.theme.resolve(candidate.value.value, ['--breakpoint'])
25+
if (!value) return
26+
return [decl('max-width', value)]
27+
})
28+
}

‎packages/tailwindcss/src/compat/screens-config.test.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
4141
'lg:flex',
4242
'min-sm:max-md:underline',
4343
'min-md:max-lg:underline',
44+
'max-w-screen-sm',
4445
// Ensure other core variants appear at the end
4546
'print:items-end',
4647
]),
@@ -51,6 +52,9 @@ test('CSS `--breakpoint-*` merge with JS config `screens`', async () => {
5152
--breakpoint-xl: 80rem;
5253
--breakpoint-2xl: 96rem;
5354
}
55+
.max-w-screen-sm {
56+
max-width: 44rem;
57+
}
5458
.sm\\:flex {
5559
@media (width >= 44rem) {
5660
display: flex;

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10288,16 +10288,6 @@ test('bg', async () => {
1028810288
// background-image
1028910289
'bg-none',
1029010290

10291-
// Legacy linear-gradient API
10292-
'bg-gradient-to-t',
10293-
'bg-gradient-to-tr',
10294-
'bg-gradient-to-r',
10295-
'bg-gradient-to-br',
10296-
'bg-gradient-to-b',
10297-
'bg-gradient-to-bl',
10298-
'bg-gradient-to-l',
10299-
'bg-gradient-to-tl',
10300-
1030110291
// Modern linear-gradient API
1030210292
'bg-linear-to-t',
1030310293
'bg-linear-to-tr',
@@ -10553,46 +10543,6 @@ test('bg', async () => {
1055310543
background-image: conic-gradient(var(--tw-gradient-stops));
1055410544
}
1055510545
10556-
.bg-gradient-to-b {
10557-
--tw-gradient-position: to bottom in oklch, ;
10558-
background-image: linear-gradient(var(--tw-gradient-stops));
10559-
}
10560-
10561-
.bg-gradient-to-bl {
10562-
--tw-gradient-position: to bottom left in oklch, ;
10563-
background-image: linear-gradient(var(--tw-gradient-stops));
10564-
}
10565-
10566-
.bg-gradient-to-br {
10567-
--tw-gradient-position: to bottom right in oklch, ;
10568-
background-image: linear-gradient(var(--tw-gradient-stops));
10569-
}
10570-
10571-
.bg-gradient-to-l {
10572-
--tw-gradient-position: to left in oklch, ;
10573-
background-image: linear-gradient(var(--tw-gradient-stops));
10574-
}
10575-
10576-
.bg-gradient-to-r {
10577-
--tw-gradient-position: to right in oklch, ;
10578-
background-image: linear-gradient(var(--tw-gradient-stops));
10579-
}
10580-
10581-
.bg-gradient-to-t {
10582-
--tw-gradient-position: to top in oklch, ;
10583-
background-image: linear-gradient(var(--tw-gradient-stops));
10584-
}
10585-
10586-
.bg-gradient-to-tl {
10587-
--tw-gradient-position: to top left in oklch, ;
10588-
background-image: linear-gradient(var(--tw-gradient-stops));
10589-
}
10590-
10591-
.bg-gradient-to-tr {
10592-
--tw-gradient-position: to top right in oklch, ;
10593-
background-image: linear-gradient(var(--tw-gradient-stops));
10594-
}
10595-
1059610546
.bg-linear-45 {
1059710547
--tw-gradient-position: 45deg in oklch, ;
1059810548
background-image: linear-gradient(var(--tw-gradient-stops));

‎packages/tailwindcss/src/utilities.ts

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2284,23 +2284,6 @@ export function createUtilities(theme: Theme) {
22842284
staticUtility('bg-none', [['background-image', 'none']])
22852285

22862286
{
2287-
// Deprecated
2288-
for (let [value, direction] of [
2289-
['t', 'top'],
2290-
['tr', 'top right'],
2291-
['r', 'right'],
2292-
['br', 'bottom right'],
2293-
['b', 'bottom'],
2294-
['bl', 'bottom left'],
2295-
['l', 'left'],
2296-
['tl', 'top left'],
2297-
]) {
2298-
staticUtility(`bg-gradient-to-${value}`, [
2299-
['--tw-gradient-position', `to ${direction} in oklch,`],
2300-
['background-image', `linear-gradient(var(--tw-gradient-stops))`],
2301-
])
2302-
}
2303-
23042287
let suggestedModifiers = [
23052288
'oklab',
23062289
'oklch',

0 commit comments

Comments
 (0)