Add missing utilities that exist in v3 (#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 7c42e4e25d3c06b312107afb5325df4b452086a6.

* Revert "add missing `max-w-screen-*` utilities"

This reverts commit 0c68e890ccfb68d104b252bdb3a8a2b2c34a0793.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix parsing body-less at-rule without terminating semicolon ([#13978](https://github.com/tailwindlabs/tailwindcss/pull/13978))
 - Ensure opacity modifier with variables work with `color-mix()` ([#13972](https://github.com/tailwindlabs/tailwindcss/pull/13972))
 - Discard invalid `variants` and `utilities` with modifiers ([#13977](https://github.com/tailwindlabs/tailwindcss/pull/13977))
+- 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))
 
 ## [4.0.0-alpha.17] - 2024-07-04
 

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

@@ -296,6 +296,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
     --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
     --drop-shadow-2xl: 0 25px 25px #00000026;
+    --drop-shadow-none: 0 0 #0000;
     --spacing-px: 1px;
     --spacing-0: 0px;
     --spacing-0_5: .125rem;

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

@@ -295,6 +295,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --drop-shadow-lg: 0 10px 8px #0000000a, 0 4px 3px #0000001a;
   --drop-shadow-xl: 0 20px 13px #00000008, 0 8px 5px #00000014;
   --drop-shadow-2xl: 0 25px 25px #00000026;
+  --drop-shadow-none: 0 0 #0000;
   --spacing-px: 1px;
   --spacing-0: 0px;
   --spacing-0_5: .125rem;

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

@@ -349,6 +349,7 @@ exports[`getClassList 1`] = `
   "-z-50",
   "@container-normal",
   "absolute",
+  "accent-auto",
   "accent-current",
   "accent-inherit",
   "accent-transparent",
@@ -809,6 +810,7 @@ exports[`getClassList 1`] = `
   "end-full",
   "fill-current",
   "fill-inherit",
+  "fill-none",
   "fill-transparent",
   "fixed",
   "flex-auto",
@@ -1347,7 +1349,7 @@ exports[`getClassList 1`] = `
   "py-3",
   "py-4",
   "relative",
-  "resize-both",
+  "resize",
   "resize-none",
   "resize-x",
   "resize-y",

packages/tailwindcss/src/utilities.test.ts

@@ -4619,8 +4619,8 @@ test('select', () => {
 })
 
 test('resize', () => {
-  expect(run(['resize-none', 'resize-both', 'resize-x', 'resize-y'])).toMatchInlineSnapshot(`
-    ".resize-both {
+  expect(run(['resize-none', 'resize', 'resize-x', 'resize-y'])).toMatchInlineSnapshot(`
+    ".resize {
       resize: both;
     }
 
@@ -4639,11 +4639,11 @@ test('resize', () => {
   expect(
     run([
       '-resize-none',
-      '-resize-both',
+      '-resize',
       '-resize-x',
       '-resize-y',
       'resize-none/foo',
-      'resize-both/foo',
+      'resize/foo',
       'resize-x/foo',
       'resize-y/foo',
     ]),
@@ -11881,6 +11881,8 @@ test('filter', () => {
         'grayscale-[--value]',
         'hue-rotate-15',
         'hue-rotate-[45deg]',
+        '-hue-rotate-15',
+        '-hue-rotate-[45deg]',
         'invert',
         'invert-0',
         'invert-[--value]',
@@ -11962,6 +11964,16 @@ test('filter', () => {
       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, );
     }
 
+    .-hue-rotate-15 {
+      --tw-hue-rotate: hue-rotate(calc(15deg * -1));
+      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, );
+    }
+
+    .-hue-rotate-\\[45deg\\] {
+      --tw-hue-rotate: hue-rotate(calc(45deg * -1));
+      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, );
+    }
+
     .hue-rotate-15 {
       --tw-hue-rotate: hue-rotate(15deg);
       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', () => {
       '-grayscale-0',
       '-grayscale-[--value]',
       'grayscale-unknown',
-      '-hue-rotate-15',
-      '-hue-rotate-[45deg]',
       'hue-rotate-unknown',
       '-invert',
       '-invert-0',
@@ -12186,6 +12196,8 @@ test('backdrop-filter', () => {
         'backdrop-grayscale-[--value]',
         'backdrop-hue-rotate-15',
         'backdrop-hue-rotate-[45deg]',
+        '-backdrop-hue-rotate-15',
+        '-backdrop-hue-rotate-[45deg]',
         'backdrop-invert',
         'backdrop-invert-0',
         'backdrop-invert-[--value]',
@@ -12266,6 +12278,18 @@ test('backdrop-filter', () => {
       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, );
     }
 
+    .-backdrop-hue-rotate-15 {
+      --tw-backdrop-hue-rotate: hue-rotate(calc(15deg * -1));
+      -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, );
+      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, );
+    }
+
+    .-backdrop-hue-rotate-\\[45deg\\] {
+      --tw-backdrop-hue-rotate: hue-rotate(calc(45deg * -1));
+      -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, );
+      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, );
+    }
+
     .backdrop-hue-rotate-15 {
       --tw-backdrop-hue-rotate: hue-rotate(15deg);
       -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', () => {
       '-backdrop-grayscale-0',
       '-backdrop-grayscale-[--value]',
       'backdrop-grayscale-unknown',
-      '-backdrop-hue-rotate-15',
-      '-backdrop-hue-rotate-[45deg]',
       'backdrop-hue-rotate-unknown',
       '-backdrop-invert',
       '-backdrop-invert-0',

packages/tailwindcss/src/utilities.ts

@@ -1708,9 +1708,9 @@ export function createUtilities(theme: Theme) {
    * @css `resize`
    */
   staticUtility('resize-none', [['resize', 'none']])
-  staticUtility('resize-both', [['resize', 'both']])
   staticUtility('resize-x', [['resize', 'horizontal']])
   staticUtility('resize-y', [['resize', 'vertical']])
+  staticUtility('resize', [['resize', 'both']])
 
   /**
    * @css `scroll-snap-type`
@@ -2080,6 +2080,7 @@ export function createUtilities(theme: Theme) {
       ]),
   ])
 
+  staticUtility('accent-auto', [['accent-color', 'auto']])
   colorUtility('accent', {
     themeKeys: ['--accent-color', '--color'],
     handle: (value) => [decl('accent-color', value)],
@@ -2791,6 +2792,7 @@ export function createUtilities(theme: Theme) {
   staticUtility('mix-blend-plus-darker', [['mix-blend-mode', 'plus-darker']])
   staticUtility('mix-blend-plus-lighter', [['mix-blend-mode', 'plus-lighter']])
 
+  staticUtility('fill-none', [['fill', 'none']])
   utilities.functional('fill', (candidate) => {
     if (candidate.negative || !candidate.value) return
 
@@ -3431,6 +3433,7 @@ export function createUtilities(theme: Theme) {
     ])
 
     functionalUtility('hue-rotate', {
+      supportsNegative: true,
       themeKeys: ['--hue-rotate'],
       handleBareValue: ({ value }) => {
         if (Number.isNaN(Number(value))) return null
@@ -3444,6 +3447,7 @@ export function createUtilities(theme: Theme) {
     })
 
     functionalUtility('backdrop-hue-rotate', {
+      supportsNegative: true,
       themeKeys: ['--backdrop-hue-rotate', '--hue-rotate'],
       handleBareValue: ({ value }) => {
         if (Number.isNaN(Number(value))) return null

packages/tailwindcss/theme.css

@@ -309,6 +309,7 @@
   --drop-shadow-lg: 0 10px 8px rgb(0 0 0 / 0.04), 0 4px 3px rgb(0 0 0 / 0.1);
   --drop-shadow-xl: 0 20px 13px rgb(0 0 0 / 0.03), 0 8px 5px rgb(0 0 0 / 0.08);
   --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+  --drop-shadow-none: 0 0 #0000;
 
   /* Spacing */
   --spacing-px: 1px;