Skip to content

Commit f7686e1

Browse files
RobinMalfaitRobinMalfait
authored
Add missing utilities that exist in v3 (tailwindlabs#13971)
* replace `resize-both` with `resize` * add missing `fill-none` * add missing `accent-auto` * add missing `blur-0` and `backdrop-blur-0` We already have `blur-none`, but that sets the blur to `' '`, whereas `blur-0` sets it to `blur(0)`. * add missing `drop-shadow-none` * support negative `hue-rotate` utilities * support negative `backdrop-hue-rotate` utilities * add missing `max-w-screen-*` utilities * update changelog * Revert "add missing `blur-0` and `backdrop-blur-0`" This reverts commit 7c42e4e. * Revert "add missing `max-w-screen-*` utilities" This reverts commit 0c68e89.
1 parent 6c0c6a5 commit f7686e1

File tree

7 files changed

+42
-10
lines changed

7 files changed

+42
-10
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1313
- Fix parsing body-less at-rule without terminating semicolon ([#13978](https://github.com/tailwindlabs/tailwindcss/pull/13978))
1414
- Ensure opacity modifier with variables work with `color-mix()` ([#13972](https://github.com/tailwindlabs/tailwindcss/pull/13972))
1515
- Discard invalid `variants` and `utilities` with modifiers ([#13977](https://github.com/tailwindlabs/tailwindcss/pull/13977))
16+
- Add missing utilities that exist in v3, such as `resize`, `fill-none`, `accent-none`, `drop-shadow-none`, and negative `hue-rotate` and `backdrop-hue-rotate` utilities ([#13971](https://github.com/tailwindlabs/tailwindcss/pull/13971))
1617

1718
## [4.0.0-alpha.17] - 2024-07-04
1819

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
296296
--drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
297297
--drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
298298
--drop-shadow-2xl: 0 25px 25px #00000026;
299+
--drop-shadow-none: 0 0 #0000;
299300
--spacing-px: 1px;
300301
--spacing-0: 0px;
301302
--spacing-0_5: .125rem;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
295295
--drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
296296
--drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
297297
--drop-shadow-2xl: 0 25px 25px #00000026;
298+
--drop-shadow-none: 0 0 #0000;
298299
--spacing-px: 1px;
299300
--spacing-0: 0px;
300301
--spacing-0_5: .125rem;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,7 @@ exports[`getClassList 1`] = `
349349
"-z-50",
350350
"@container-normal",
351351
"absolute",
352+
"accent-auto",
352353
"accent-current",
353354
"accent-inherit",
354355
"accent-transparent",
@@ -809,6 +810,7 @@ exports[`getClassList 1`] = `
809810
"end-full",
810811
"fill-current",
811812
"fill-inherit",
813+
"fill-none",
812814
"fill-transparent",
813815
"fixed",
814816
"flex-auto",
@@ -1347,7 +1349,7 @@ exports[`getClassList 1`] = `
13471349
"py-3",
13481350
"py-4",
13491351
"relative",
1350-
"resize-both",
1352+
"resize",
13511353
"resize-none",
13521354
"resize-x",
13531355
"resize-y",

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

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4619,8 +4619,8 @@ test('select', () => {
46194619
})
46204620

46214621
test('resize', () => {
4622-
expect(run(['resize-none', 'resize-both', 'resize-x', 'resize-y'])).toMatchInlineSnapshot(`
4623-
".resize-both {
4622+
expect(run(['resize-none', 'resize', 'resize-x', 'resize-y'])).toMatchInlineSnapshot(`
4623+
".resize {
46244624
resize: both;
46254625
}
46264626
@@ -4639,11 +4639,11 @@ test('resize', () => {
46394639
expect(
46404640
run([
46414641
'-resize-none',
4642-
'-resize-both',
4642+
'-resize',
46434643
'-resize-x',
46444644
'-resize-y',
46454645
'resize-none/foo',
4646-
'resize-both/foo',
4646+
'resize/foo',
46474647
'resize-x/foo',
46484648
'resize-y/foo',
46494649
]),
@@ -11881,6 +11881,8 @@ test('filter', () => {
1188111881
'grayscale-[--value]',
1188211882
'hue-rotate-15',
1188311883
'hue-rotate-[45deg]',
11884+
'-hue-rotate-15',
11885+
'-hue-rotate-[45deg]',
1188411886
'invert',
1188511887
'invert-0',
1188611888
'invert-[--value]',
@@ -11962,6 +11964,16 @@ test('filter', () => {
1196211964
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
1196311965
}
1196411966
11967+
.-hue-rotate-15 {
11968+
--tw-hue-rotate: hue-rotate(calc(15deg * -1));
11969+
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
11970+
}
11971+
11972+
.-hue-rotate-\\[45deg\\] {
11973+
--tw-hue-rotate: hue-rotate(calc(45deg * -1));
11974+
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
11975+
}
11976+
1196511977
.hue-rotate-15 {
1196611978
--tw-hue-rotate: hue-rotate(15deg);
1196711979
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
@@ -12112,8 +12124,6 @@ test('filter', () => {
1211212124
'-grayscale-0',
1211312125
'-grayscale-[--value]',
1211412126
'grayscale-unknown',
12115-
'-hue-rotate-15',
12116-
'-hue-rotate-[45deg]',
1211712127
'hue-rotate-unknown',
1211812128
'-invert',
1211912129
'-invert-0',
@@ -12186,6 +12196,8 @@ test('backdrop-filter', () => {
1218612196
'backdrop-grayscale-[--value]',
1218712197
'backdrop-hue-rotate-15',
1218812198
'backdrop-hue-rotate-[45deg]',
12199+
'-backdrop-hue-rotate-15',
12200+
'-backdrop-hue-rotate-[45deg]',
1218912201
'backdrop-invert',
1219012202
'backdrop-invert-0',
1219112203
'backdrop-invert-[--value]',
@@ -12266,6 +12278,18 @@ test('backdrop-filter', () => {
1226612278
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
1226712279
}
1226812280
12281+
.-backdrop-hue-rotate-15 {
12282+
--tw-backdrop-hue-rotate: hue-rotate(calc(15deg * -1));
12283+
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
12284+
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
12285+
}
12286+
12287+
.-backdrop-hue-rotate-\\[45deg\\] {
12288+
--tw-backdrop-hue-rotate: hue-rotate(calc(45deg * -1));
12289+
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
12290+
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
12291+
}
12292+
1226912293
.backdrop-hue-rotate-15 {
1227012294
--tw-backdrop-hue-rotate: hue-rotate(15deg);
1227112295
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -12449,8 +12473,6 @@ test('backdrop-filter', () => {
1244912473
'-backdrop-grayscale-0',
1245012474
'-backdrop-grayscale-[--value]',
1245112475
'backdrop-grayscale-unknown',
12452-
'-backdrop-hue-rotate-15',
12453-
'-backdrop-hue-rotate-[45deg]',
1245412476
'backdrop-hue-rotate-unknown',
1245512477
'-backdrop-invert',
1245612478
'-backdrop-invert-0',

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1708,9 +1708,9 @@ export function createUtilities(theme: Theme) {
17081708
* @css `resize`
17091709
*/
17101710
staticUtility('resize-none', [['resize', 'none']])
1711-
staticUtility('resize-both', [['resize', 'both']])
17121711
staticUtility('resize-x', [['resize', 'horizontal']])
17131712
staticUtility('resize-y', [['resize', 'vertical']])
1713+
staticUtility('resize', [['resize', 'both']])
17141714

17151715
/**
17161716
* @css `scroll-snap-type`
@@ -2080,6 +2080,7 @@ export function createUtilities(theme: Theme) {
20802080
]),
20812081
])
20822082

2083+
staticUtility('accent-auto', [['accent-color', 'auto']])
20832084
colorUtility('accent', {
20842085
themeKeys: ['--accent-color', '--color'],
20852086
handle: (value) => [decl('accent-color', value)],
@@ -2791,6 +2792,7 @@ export function createUtilities(theme: Theme) {
27912792
staticUtility('mix-blend-plus-darker', [['mix-blend-mode', 'plus-darker']])
27922793
staticUtility('mix-blend-plus-lighter', [['mix-blend-mode', 'plus-lighter']])
27932794

2795+
staticUtility('fill-none', [['fill', 'none']])
27942796
utilities.functional('fill', (candidate) => {
27952797
if (candidate.negative || !candidate.value) return
27962798

@@ -3431,6 +3433,7 @@ export function createUtilities(theme: Theme) {
34313433
])
34323434

34333435
functionalUtility('hue-rotate', {
3436+
supportsNegative: true,
34343437
themeKeys: ['--hue-rotate'],
34353438
handleBareValue: ({ value }) => {
34363439
if (Number.isNaN(Number(value))) return null
@@ -3444,6 +3447,7 @@ export function createUtilities(theme: Theme) {
34443447
})
34453448

34463449
functionalUtility('backdrop-hue-rotate', {
3450+
supportsNegative: true,
34473451
themeKeys: ['--backdrop-hue-rotate', '--hue-rotate'],
34483452
handleBareValue: ({ value }) => {
34493453
if (Number.isNaN(Number(value))) return null

‎packages/tailwindcss/theme.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,7 @@
309309
--drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
310310
--drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
311311
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
312+
--drop-shadow-none: 0 0 #0000;
312313

313314
/* Spacing */
314315
--spacing-px: 1px;

0 commit comments

Comments
 (0)