From 60a06788fe446501dd76f385025cd948b96ffd29 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 4 Apr 2021 19:09:34 -0400
Subject: [PATCH] Add CSS filter support (#3923)

* Implement `filter` helper classes with all methods

* Rename filter plugins/utilities, drop filter opacity, add drop shadow

* Remove non-final default filter values

* Working on default filter values, add basic JIT support

* Working on blur values

* New blur values (these are ~okay)

* Match drop-shadow values to box-shadows by eye as best as possible

* Update tests

* Fix kitchen sink test

* Add filter variants configuration

* Move drop-shadow to end of filters list

Co-Authored-By: Peter Neupauer <peter@neupauer.sk>

* Add invert variants configuration

* Add backdrop-filter utilities

* Update tests

* Transition filters by default

* Alphabetize new config keys

* Optimize filter plugins for JIT + add arbitrary value support

Except for drop-shadow, will add that once we can think it through a bit.

Co-authored-by: Nick Schmidt <nick@kreativgebiet.com>
Co-authored-by: Peter Neupauer <peter@neupauer.sk>
---
 .../fixtures/tailwind-output-flagged.css      | 2588 ++++++++++++++++-
 .../fixtures/tailwind-output-important.css    | 2588 ++++++++++++++++-
 .../tailwind-output-no-color-opacity.css      | 2588 ++++++++++++++++-
 __tests__/fixtures/tailwind-output.css        | 2588 ++++++++++++++++-
 jit/corePlugins/index.js                      |   22 +
 jit/tests/arbitrary-values.test.css           |   51 +
 jit/tests/arbitrary-values.test.html          |   17 +
 jit/tests/arbitrary-values.test.js            |    1 +
 jit/tests/basic-usage.test.css                |   90 +-
 jit/tests/basic-usage.test.html               |    6 +
 jit/tests/kitchen-sink.test.css               |   14 +-
 jit/tests/kitchen-sink.test.html              |    2 +-
 jit/tests/kitchen-sink.test.js                |    8 +-
 src/corePluginList.js                         |   20 +
 src/plugins/backdropBlur.js                   |   37 +
 src/plugins/backdropBrightness.js             |   39 +
 src/plugins/backdropContrast.js               |   39 +
 src/plugins/backdropFilter.js                 |   32 +
 src/plugins/backdropGrayscale.js              |   39 +
 src/plugins/backdropHueRotate.js              |   39 +
 src/plugins/backdropInvert.js                 |   39 +
 src/plugins/backdropOpacity.js                |   39 +
 src/plugins/backdropSaturate.js               |   39 +
 src/plugins/backdropSepia.js                  |   39 +
 src/plugins/blur.js                           |   35 +
 src/plugins/brightness.js                     |   37 +
 src/plugins/contrast.js                       |   37 +
 src/plugins/dropShadow.js                     |   21 +
 src/plugins/filter.js                         |   32 +
 src/plugins/grayscale.js                      |   37 +
 src/plugins/hueRotate.js                      |   37 +
 src/plugins/index.js                          |   20 +
 src/plugins/invert.js                         |   37 +
 src/plugins/saturate.js                       |   37 +
 src/plugins/sepia.js                          |   37 +
 stubs/defaultConfig.stub.js                   |  105 +-
 36 files changed, 11398 insertions(+), 38 deletions(-)
 create mode 100644 src/plugins/backdropBlur.js
 create mode 100644 src/plugins/backdropBrightness.js
 create mode 100644 src/plugins/backdropContrast.js
 create mode 100644 src/plugins/backdropFilter.js
 create mode 100644 src/plugins/backdropGrayscale.js
 create mode 100644 src/plugins/backdropHueRotate.js
 create mode 100644 src/plugins/backdropInvert.js
 create mode 100644 src/plugins/backdropOpacity.js
 create mode 100644 src/plugins/backdropSaturate.js
 create mode 100644 src/plugins/backdropSepia.js
 create mode 100644 src/plugins/blur.js
 create mode 100644 src/plugins/brightness.js
 create mode 100644 src/plugins/contrast.js
 create mode 100644 src/plugins/dropShadow.js
 create mode 100644 src/plugins/filter.js
 create mode 100644 src/plugins/grayscale.js
 create mode 100644 src/plugins/hueRotate.js
 create mode 100644 src/plugins/invert.js
 create mode 100644 src/plugins/saturate.js
 create mode 100644 src/plugins/sepia.js

diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index f82cac248a3b..cba1a803d9ed 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -28985,7 +28985,7 @@ video {
 }
 
 .transition {
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -29273,6 +29273,512 @@ video {
   background-blend-mode: luminosity;
 }
 
+.filter {
+  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+  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);
+}
+
+.filter-none {
+  filter: none;
+}
+
+.blur-0 {
+  --tw-blur: blur(0);
+}
+
+.blur-sm {
+  --tw-blur: blur(4px);
+}
+
+.blur {
+  --tw-blur: blur(8px);
+}
+
+.blur-md {
+  --tw-blur: blur(12px);
+}
+
+.blur-lg {
+  --tw-blur: blur(16px);
+}
+
+.blur-xl {
+  --tw-blur: blur(24px);
+}
+
+.blur-2xl {
+  --tw-blur: blur(40px);
+}
+
+.blur-3xl {
+  --tw-blur: blur(64px);
+}
+
+.brightness-0 {
+  --tw-brightness: brightness(0);
+}
+
+.brightness-50 {
+  --tw-brightness: brightness(.5);
+}
+
+.brightness-75 {
+  --tw-brightness: brightness(.75);
+}
+
+.brightness-90 {
+  --tw-brightness: brightness(.9);
+}
+
+.brightness-95 {
+  --tw-brightness: brightness(.95);
+}
+
+.brightness-100 {
+  --tw-brightness: brightness(1);
+}
+
+.brightness-105 {
+  --tw-brightness: brightness(1.05);
+}
+
+.brightness-110 {
+  --tw-brightness: brightness(1.1);
+}
+
+.brightness-125 {
+  --tw-brightness: brightness(1.25);
+}
+
+.brightness-150 {
+  --tw-brightness: brightness(1.5);
+}
+
+.brightness-200 {
+  --tw-brightness: brightness(2);
+}
+
+.contrast-0 {
+  --tw-contrast: contrast(0);
+}
+
+.contrast-50 {
+  --tw-contrast: contrast(.5);
+}
+
+.contrast-75 {
+  --tw-contrast: contrast(.75);
+}
+
+.contrast-100 {
+  --tw-contrast: contrast(1);
+}
+
+.contrast-125 {
+  --tw-contrast: contrast(1.25);
+}
+
+.contrast-150 {
+  --tw-contrast: contrast(1.5);
+}
+
+.contrast-200 {
+  --tw-contrast: contrast(2);
+}
+
+.drop-shadow-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+}
+
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+}
+
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+}
+
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+}
+
+.drop-shadow-xl {
+  --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+}
+
+.drop-shadow-2xl {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+}
+
+.drop-shadow-none {
+  --tw-drop-shadow: drop-shadow(0 0 #0000);
+}
+
+.grayscale-0 {
+  --tw-grayscale: grayscale(0);
+}
+
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+}
+
+.hue-rotate-0 {
+  --tw-hue-rotate: hue-rotate(0deg);
+}
+
+.hue-rotate-15 {
+  --tw-hue-rotate: hue-rotate(15deg);
+}
+
+.hue-rotate-30 {
+  --tw-hue-rotate: hue-rotate(30deg);
+}
+
+.hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(60deg);
+}
+
+.hue-rotate-90 {
+  --tw-hue-rotate: hue-rotate(90deg);
+}
+
+.hue-rotate-180 {
+  --tw-hue-rotate: hue-rotate(180deg);
+}
+
+.-hue-rotate-180 {
+  --tw-hue-rotate: hue-rotate(-180deg);
+}
+
+.-hue-rotate-90 {
+  --tw-hue-rotate: hue-rotate(-90deg);
+}
+
+.-hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(-60deg);
+}
+
+.-hue-rotate-30 {
+  --tw-hue-rotate: hue-rotate(-30deg);
+}
+
+.-hue-rotate-15 {
+  --tw-hue-rotate: hue-rotate(-15deg);
+}
+
+.invert-0 {
+  --tw-invert: invert(0);
+}
+
+.invert {
+  --tw-invert: invert(100%);
+}
+
+.saturate-0 {
+  --tw-saturate: saturate(0);
+}
+
+.saturate-50 {
+  --tw-saturate: saturate(.5);
+}
+
+.saturate-100 {
+  --tw-saturate: saturate(1);
+}
+
+.saturate-150 {
+  --tw-saturate: saturate(1.5);
+}
+
+.saturate-200 {
+  --tw-saturate: saturate(2);
+}
+
+.sepia-0 {
+  --tw-sepia: sepia(0);
+}
+
+.sepia {
+  --tw-sepia: sepia(100%);
+}
+
+.backdrop-filter {
+  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+  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-none {
+  backdrop-filter: none;
+}
+
+.backdrop-blur-0 {
+  --tw-backdrop-blur: blur(0);
+}
+
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+}
+
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+}
+
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+}
+
+.backdrop-blur-lg {
+  --tw-backdrop-blur: blur(16px);
+}
+
+.backdrop-blur-xl {
+  --tw-backdrop-blur: blur(24px);
+}
+
+.backdrop-blur-2xl {
+  --tw-backdrop-blur: blur(40px);
+}
+
+.backdrop-blur-3xl {
+  --tw-backdrop-blur: blur(64px);
+}
+
+.backdrop-brightness-0 {
+  --tw-backdrop-brightness: brightness(0);
+}
+
+.backdrop-brightness-50 {
+  --tw-backdrop-brightness: brightness(.5);
+}
+
+.backdrop-brightness-75 {
+  --tw-backdrop-brightness: brightness(.75);
+}
+
+.backdrop-brightness-90 {
+  --tw-backdrop-brightness: brightness(.9);
+}
+
+.backdrop-brightness-95 {
+  --tw-backdrop-brightness: brightness(.95);
+}
+
+.backdrop-brightness-100 {
+  --tw-backdrop-brightness: brightness(1);
+}
+
+.backdrop-brightness-105 {
+  --tw-backdrop-brightness: brightness(1.05);
+}
+
+.backdrop-brightness-110 {
+  --tw-backdrop-brightness: brightness(1.1);
+}
+
+.backdrop-brightness-125 {
+  --tw-backdrop-brightness: brightness(1.25);
+}
+
+.backdrop-brightness-150 {
+  --tw-backdrop-brightness: brightness(1.5);
+}
+
+.backdrop-brightness-200 {
+  --tw-backdrop-brightness: brightness(2);
+}
+
+.backdrop-contrast-0 {
+  --tw-backdrop-contrast: contrast(0);
+}
+
+.backdrop-contrast-50 {
+  --tw-backdrop-contrast: contrast(.5);
+}
+
+.backdrop-contrast-75 {
+  --tw-backdrop-contrast: contrast(.75);
+}
+
+.backdrop-contrast-100 {
+  --tw-backdrop-contrast: contrast(1);
+}
+
+.backdrop-contrast-125 {
+  --tw-backdrop-contrast: contrast(1.25);
+}
+
+.backdrop-contrast-150 {
+  --tw-backdrop-contrast: contrast(1.5);
+}
+
+.backdrop-contrast-200 {
+  --tw-backdrop-contrast: contrast(2);
+}
+
+.backdrop-grayscale-0 {
+  --tw-backdrop-grayscale: grayscale(0);
+}
+
+.backdrop-grayscale {
+  --tw-backdrop-grayscale: grayscale(100%);
+}
+
+.backdrop-hue-rotate-0 {
+  --tw-backdrop-hue-rotate: hue-rotate(0deg);
+}
+
+.backdrop-hue-rotate-15 {
+  --tw-backdrop-hue-rotate: hue-rotate(15deg);
+}
+
+.backdrop-hue-rotate-30 {
+  --tw-backdrop-hue-rotate: hue-rotate(30deg);
+}
+
+.backdrop-hue-rotate-60 {
+  --tw-backdrop-hue-rotate: hue-rotate(60deg);
+}
+
+.backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(90deg);
+}
+
+.backdrop-hue-rotate-180 {
+  --tw-backdrop-hue-rotate: hue-rotate(180deg);
+}
+
+.-backdrop-hue-rotate-180 {
+  --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+}
+
+.-backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+}
+
+.-backdrop-hue-rotate-60 {
+  --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+}
+
+.-backdrop-hue-rotate-30 {
+  --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+}
+
+.-backdrop-hue-rotate-15 {
+  --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+}
+
+.backdrop-invert-0 {
+  --tw-backdrop-invert: invert(0);
+}
+
+.backdrop-invert {
+  --tw-backdrop-invert: invert(100%);
+}
+
+.backdrop-opacity-0 {
+  --tw-backdrop-opacity: opacity(0);
+}
+
+.backdrop-opacity-5 {
+  --tw-backdrop-opacity: opacity(0.05);
+}
+
+.backdrop-opacity-10 {
+  --tw-backdrop-opacity: opacity(0.1);
+}
+
+.backdrop-opacity-20 {
+  --tw-backdrop-opacity: opacity(0.2);
+}
+
+.backdrop-opacity-25 {
+  --tw-backdrop-opacity: opacity(0.25);
+}
+
+.backdrop-opacity-30 {
+  --tw-backdrop-opacity: opacity(0.3);
+}
+
+.backdrop-opacity-40 {
+  --tw-backdrop-opacity: opacity(0.4);
+}
+
+.backdrop-opacity-50 {
+  --tw-backdrop-opacity: opacity(0.5);
+}
+
+.backdrop-opacity-60 {
+  --tw-backdrop-opacity: opacity(0.6);
+}
+
+.backdrop-opacity-70 {
+  --tw-backdrop-opacity: opacity(0.7);
+}
+
+.backdrop-opacity-75 {
+  --tw-backdrop-opacity: opacity(0.75);
+}
+
+.backdrop-opacity-80 {
+  --tw-backdrop-opacity: opacity(0.8);
+}
+
+.backdrop-opacity-90 {
+  --tw-backdrop-opacity: opacity(0.9);
+}
+
+.backdrop-opacity-95 {
+  --tw-backdrop-opacity: opacity(0.95);
+}
+
+.backdrop-opacity-100 {
+  --tw-backdrop-opacity: opacity(1);
+}
+
+.backdrop-saturate-0 {
+  --tw-backdrop-saturate: saturate(0);
+}
+
+.backdrop-saturate-50 {
+  --tw-backdrop-saturate: saturate(.5);
+}
+
+.backdrop-saturate-100 {
+  --tw-backdrop-saturate: saturate(1);
+}
+
+.backdrop-saturate-150 {
+  --tw-backdrop-saturate: saturate(1.5);
+}
+
+.backdrop-saturate-200 {
+  --tw-backdrop-saturate: saturate(2);
+}
+
+.backdrop-sepia-0 {
+  --tw-backdrop-sepia: sepia(0);
+}
+
+.backdrop-sepia {
+  --tw-backdrop-sepia: sepia(100%);
+}
+
 .example {
   font-weight: 700;
   color: #ef4444;
@@ -57712,7 +58218,7 @@ video {
   }
 
   .sm\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -57969,6 +58475,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .sm\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .sm\:filter-none {
+    filter: none;
+  }
+
+  .sm\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .sm\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .sm\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .sm\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .sm\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .sm\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .sm\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .sm\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .sm\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .sm\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .sm\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .sm\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .sm\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .sm\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .sm\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .sm\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .sm\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .sm\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .sm\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .sm\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .sm\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .sm\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .sm\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .sm\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .sm\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .sm\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .sm\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .sm\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .sm\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .sm\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .sm\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .sm\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .sm\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .sm\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .sm\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .sm\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .sm\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .sm\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .sm\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .sm\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .sm\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .sm\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .sm\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .sm\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .sm\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .sm\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .sm\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .sm\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .sm\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .sm\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .sm\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .sm\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .sm\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .sm\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .sm\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .sm\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .sm\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .sm\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .sm\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .sm\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .sm\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .sm\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .sm\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .sm\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .sm\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .sm\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .sm\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .sm\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .sm\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .sm\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .sm\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .sm\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .sm\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .sm\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .sm\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .sm\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .sm\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .sm\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .sm\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .sm\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .sm\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .sm\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .sm\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .sm\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .sm\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .sm\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .sm\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .sm\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .sm\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .sm\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .sm\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .sm\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .sm\:example {
     font-weight: 700;
     color: #ef4444;
@@ -86409,7 +87329,7 @@ video {
   }
 
   .md\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -86666,6 +87586,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .md\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .md\:filter-none {
+    filter: none;
+  }
+
+  .md\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .md\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .md\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .md\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .md\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .md\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .md\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .md\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .md\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .md\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .md\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .md\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .md\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .md\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .md\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .md\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .md\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .md\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .md\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .md\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .md\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .md\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .md\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .md\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .md\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .md\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .md\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .md\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .md\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .md\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .md\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .md\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .md\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .md\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .md\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .md\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .md\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .md\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .md\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .md\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .md\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .md\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .md\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .md\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .md\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .md\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .md\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .md\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .md\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .md\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .md\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .md\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .md\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .md\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .md\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .md\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .md\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .md\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .md\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .md\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .md\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .md\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .md\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .md\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .md\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .md\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .md\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .md\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .md\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .md\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .md\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .md\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .md\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .md\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .md\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .md\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .md\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .md\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .md\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .md\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .md\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .md\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .md\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .md\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .md\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .md\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .md\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .md\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .md\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .md\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .md\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .md\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .md\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .md\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .md\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .md\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .md\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .md\:example {
     font-weight: 700;
     color: #ef4444;
@@ -115106,7 +116440,7 @@ video {
   }
 
   .lg\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -115363,6 +116697,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .lg\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .lg\:filter-none {
+    filter: none;
+  }
+
+  .lg\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .lg\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .lg\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .lg\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .lg\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .lg\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .lg\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .lg\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .lg\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .lg\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .lg\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .lg\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .lg\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .lg\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .lg\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .lg\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .lg\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .lg\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .lg\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .lg\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .lg\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .lg\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .lg\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .lg\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .lg\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .lg\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .lg\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .lg\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .lg\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .lg\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .lg\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .lg\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .lg\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .lg\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .lg\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .lg\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .lg\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .lg\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .lg\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .lg\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .lg\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .lg\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .lg\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .lg\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .lg\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .lg\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .lg\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .lg\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .lg\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .lg\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .lg\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .lg\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .lg\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .lg\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .lg\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .lg\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .lg\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .lg\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .lg\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .lg\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .lg\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .lg\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .lg\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .lg\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .lg\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .lg\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .lg\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .lg\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .lg\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .lg\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .lg\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .lg\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .lg\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .lg\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .lg\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .lg\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .lg\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .lg\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .lg\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .lg\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .lg\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .lg\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .lg\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .lg\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .lg\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .lg\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .lg\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .lg\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .lg\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .lg\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .lg\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .lg\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .lg\:example {
     font-weight: 700;
     color: #ef4444;
@@ -143803,7 +145551,7 @@ video {
   }
 
   .xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -144060,6 +145808,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .xl\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .xl\:filter-none {
+    filter: none;
+  }
+
+  .xl\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .xl\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .xl\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .xl\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .xl\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .xl\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .xl\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .xl\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .xl\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .xl\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .xl\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .xl\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .xl\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .xl\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .xl\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .xl\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .xl\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .xl\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .xl\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .xl\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .xl\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .xl\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .xl\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .xl\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .xl\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .xl\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .xl\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .xl\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .xl\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .xl\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .xl\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .xl\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .xl\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .xl\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .xl\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .xl\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .xl\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .xl\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .xl\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .xl\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .xl\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .xl\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .xl\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .xl\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .xl\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .xl\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .xl\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .xl\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .xl\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .xl\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .xl\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .xl\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .xl\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .xl\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .xl\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .xl\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .xl\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .xl\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .xl\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .xl\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .xl\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .xl\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .xl\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .xl\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .xl\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .xl\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .xl\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .xl\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .xl\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .xl\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .xl\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .xl\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .xl\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .xl\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .xl\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .xl\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .xl\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .xl\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .xl\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .xl\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .xl\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .xl\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .xl\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .xl\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .xl\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .xl\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .xl\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .xl\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .xl\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .xl\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .xl\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .xl\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .xl\:example {
     font-weight: 700;
     color: #ef4444;
@@ -172500,7 +174662,7 @@ video {
   }
 
   .\32xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -172757,6 +174919,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .\32xl\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .\32xl\:filter-none {
+    filter: none;
+  }
+
+  .\32xl\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .\32xl\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .\32xl\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .\32xl\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .\32xl\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .\32xl\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .\32xl\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .\32xl\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .\32xl\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .\32xl\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .\32xl\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .\32xl\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .\32xl\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .\32xl\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .\32xl\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .\32xl\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .\32xl\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .\32xl\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .\32xl\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .\32xl\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .\32xl\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .\32xl\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .\32xl\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .\32xl\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .\32xl\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .\32xl\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .\32xl\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .\32xl\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .\32xl\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .\32xl\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .\32xl\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .\32xl\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .\32xl\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .\32xl\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .\32xl\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .\32xl\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .\32xl\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .\32xl\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .\32xl\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .\32xl\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .\32xl\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .\32xl\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .\32xl\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .\32xl\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .\32xl\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .\32xl\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .\32xl\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .\32xl\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .\32xl\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .\32xl\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .\32xl\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .\32xl\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .\32xl\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .\32xl\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .\32xl\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .\32xl\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .\32xl\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .\32xl\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .\32xl\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .\32xl\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .\32xl\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .\32xl\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .\32xl\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .\32xl\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .\32xl\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .\32xl\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .\32xl\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .\32xl\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .\32xl\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .\32xl\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .\32xl\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .\32xl\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .\32xl\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .\32xl\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .\32xl\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .\32xl\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .\32xl\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .\32xl\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .\32xl\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .\32xl\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .\32xl\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .\32xl\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .\32xl\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .\32xl\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .\32xl\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .\32xl\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .\32xl\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .\32xl\:example {
     font-weight: 700;
     color: #ef4444;
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index d233ab9fe6dc..9b6b8932016f 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -28985,7 +28985,7 @@ video {
 }
 
 .transition {
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
   transition-duration: 150ms !important;
 }
@@ -29273,6 +29273,512 @@ video {
   background-blend-mode: luminosity !important;
 }
 
+.filter {
+  --tw-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/) !important;
+  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) !important;
+}
+
+.filter-none {
+  filter: none !important;
+}
+
+.blur-0 {
+  --tw-blur: blur(0) !important;
+}
+
+.blur-sm {
+  --tw-blur: blur(4px) !important;
+}
+
+.blur {
+  --tw-blur: blur(8px) !important;
+}
+
+.blur-md {
+  --tw-blur: blur(12px) !important;
+}
+
+.blur-lg {
+  --tw-blur: blur(16px) !important;
+}
+
+.blur-xl {
+  --tw-blur: blur(24px) !important;
+}
+
+.blur-2xl {
+  --tw-blur: blur(40px) !important;
+}
+
+.blur-3xl {
+  --tw-blur: blur(64px) !important;
+}
+
+.brightness-0 {
+  --tw-brightness: brightness(0) !important;
+}
+
+.brightness-50 {
+  --tw-brightness: brightness(.5) !important;
+}
+
+.brightness-75 {
+  --tw-brightness: brightness(.75) !important;
+}
+
+.brightness-90 {
+  --tw-brightness: brightness(.9) !important;
+}
+
+.brightness-95 {
+  --tw-brightness: brightness(.95) !important;
+}
+
+.brightness-100 {
+  --tw-brightness: brightness(1) !important;
+}
+
+.brightness-105 {
+  --tw-brightness: brightness(1.05) !important;
+}
+
+.brightness-110 {
+  --tw-brightness: brightness(1.1) !important;
+}
+
+.brightness-125 {
+  --tw-brightness: brightness(1.25) !important;
+}
+
+.brightness-150 {
+  --tw-brightness: brightness(1.5) !important;
+}
+
+.brightness-200 {
+  --tw-brightness: brightness(2) !important;
+}
+
+.contrast-0 {
+  --tw-contrast: contrast(0) !important;
+}
+
+.contrast-50 {
+  --tw-contrast: contrast(.5) !important;
+}
+
+.contrast-75 {
+  --tw-contrast: contrast(.75) !important;
+}
+
+.contrast-100 {
+  --tw-contrast: contrast(1) !important;
+}
+
+.contrast-125 {
+  --tw-contrast: contrast(1.25) !important;
+}
+
+.contrast-150 {
+  --tw-contrast: contrast(1.5) !important;
+}
+
+.contrast-200 {
+  --tw-contrast: contrast(2) !important;
+}
+
+.drop-shadow-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)) !important;
+}
+
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) !important;
+}
+
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)) !important;
+}
+
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)) !important;
+}
+
+.drop-shadow-xl {
+  --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)) !important;
+}
+
+.drop-shadow-2xl {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)) !important;
+}
+
+.drop-shadow-none {
+  --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
+}
+
+.grayscale-0 {
+  --tw-grayscale: grayscale(0) !important;
+}
+
+.grayscale {
+  --tw-grayscale: grayscale(100%) !important;
+}
+
+.hue-rotate-0 {
+  --tw-hue-rotate: hue-rotate(0deg) !important;
+}
+
+.hue-rotate-15 {
+  --tw-hue-rotate: hue-rotate(15deg) !important;
+}
+
+.hue-rotate-30 {
+  --tw-hue-rotate: hue-rotate(30deg) !important;
+}
+
+.hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(60deg) !important;
+}
+
+.hue-rotate-90 {
+  --tw-hue-rotate: hue-rotate(90deg) !important;
+}
+
+.hue-rotate-180 {
+  --tw-hue-rotate: hue-rotate(180deg) !important;
+}
+
+.-hue-rotate-180 {
+  --tw-hue-rotate: hue-rotate(-180deg) !important;
+}
+
+.-hue-rotate-90 {
+  --tw-hue-rotate: hue-rotate(-90deg) !important;
+}
+
+.-hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(-60deg) !important;
+}
+
+.-hue-rotate-30 {
+  --tw-hue-rotate: hue-rotate(-30deg) !important;
+}
+
+.-hue-rotate-15 {
+  --tw-hue-rotate: hue-rotate(-15deg) !important;
+}
+
+.invert-0 {
+  --tw-invert: invert(0) !important;
+}
+
+.invert {
+  --tw-invert: invert(100%) !important;
+}
+
+.saturate-0 {
+  --tw-saturate: saturate(0) !important;
+}
+
+.saturate-50 {
+  --tw-saturate: saturate(.5) !important;
+}
+
+.saturate-100 {
+  --tw-saturate: saturate(1) !important;
+}
+
+.saturate-150 {
+  --tw-saturate: saturate(1.5) !important;
+}
+
+.saturate-200 {
+  --tw-saturate: saturate(2) !important;
+}
+
+.sepia-0 {
+  --tw-sepia: sepia(0) !important;
+}
+
+.sepia {
+  --tw-sepia: sepia(100%) !important;
+}
+
+.backdrop-filter {
+  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+  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) !important;
+}
+
+.backdrop-filter-none {
+  backdrop-filter: none !important;
+}
+
+.backdrop-blur-0 {
+  --tw-backdrop-blur: blur(0) !important;
+}
+
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px) !important;
+}
+
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px) !important;
+}
+
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px) !important;
+}
+
+.backdrop-blur-lg {
+  --tw-backdrop-blur: blur(16px) !important;
+}
+
+.backdrop-blur-xl {
+  --tw-backdrop-blur: blur(24px) !important;
+}
+
+.backdrop-blur-2xl {
+  --tw-backdrop-blur: blur(40px) !important;
+}
+
+.backdrop-blur-3xl {
+  --tw-backdrop-blur: blur(64px) !important;
+}
+
+.backdrop-brightness-0 {
+  --tw-backdrop-brightness: brightness(0) !important;
+}
+
+.backdrop-brightness-50 {
+  --tw-backdrop-brightness: brightness(.5) !important;
+}
+
+.backdrop-brightness-75 {
+  --tw-backdrop-brightness: brightness(.75) !important;
+}
+
+.backdrop-brightness-90 {
+  --tw-backdrop-brightness: brightness(.9) !important;
+}
+
+.backdrop-brightness-95 {
+  --tw-backdrop-brightness: brightness(.95) !important;
+}
+
+.backdrop-brightness-100 {
+  --tw-backdrop-brightness: brightness(1) !important;
+}
+
+.backdrop-brightness-105 {
+  --tw-backdrop-brightness: brightness(1.05) !important;
+}
+
+.backdrop-brightness-110 {
+  --tw-backdrop-brightness: brightness(1.1) !important;
+}
+
+.backdrop-brightness-125 {
+  --tw-backdrop-brightness: brightness(1.25) !important;
+}
+
+.backdrop-brightness-150 {
+  --tw-backdrop-brightness: brightness(1.5) !important;
+}
+
+.backdrop-brightness-200 {
+  --tw-backdrop-brightness: brightness(2) !important;
+}
+
+.backdrop-contrast-0 {
+  --tw-backdrop-contrast: contrast(0) !important;
+}
+
+.backdrop-contrast-50 {
+  --tw-backdrop-contrast: contrast(.5) !important;
+}
+
+.backdrop-contrast-75 {
+  --tw-backdrop-contrast: contrast(.75) !important;
+}
+
+.backdrop-contrast-100 {
+  --tw-backdrop-contrast: contrast(1) !important;
+}
+
+.backdrop-contrast-125 {
+  --tw-backdrop-contrast: contrast(1.25) !important;
+}
+
+.backdrop-contrast-150 {
+  --tw-backdrop-contrast: contrast(1.5) !important;
+}
+
+.backdrop-contrast-200 {
+  --tw-backdrop-contrast: contrast(2) !important;
+}
+
+.backdrop-grayscale-0 {
+  --tw-backdrop-grayscale: grayscale(0) !important;
+}
+
+.backdrop-grayscale {
+  --tw-backdrop-grayscale: grayscale(100%) !important;
+}
+
+.backdrop-hue-rotate-0 {
+  --tw-backdrop-hue-rotate: hue-rotate(0deg) !important;
+}
+
+.backdrop-hue-rotate-15 {
+  --tw-backdrop-hue-rotate: hue-rotate(15deg) !important;
+}
+
+.backdrop-hue-rotate-30 {
+  --tw-backdrop-hue-rotate: hue-rotate(30deg) !important;
+}
+
+.backdrop-hue-rotate-60 {
+  --tw-backdrop-hue-rotate: hue-rotate(60deg) !important;
+}
+
+.backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(90deg) !important;
+}
+
+.backdrop-hue-rotate-180 {
+  --tw-backdrop-hue-rotate: hue-rotate(180deg) !important;
+}
+
+.-backdrop-hue-rotate-180 {
+  --tw-backdrop-hue-rotate: hue-rotate(-180deg) !important;
+}
+
+.-backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(-90deg) !important;
+}
+
+.-backdrop-hue-rotate-60 {
+  --tw-backdrop-hue-rotate: hue-rotate(-60deg) !important;
+}
+
+.-backdrop-hue-rotate-30 {
+  --tw-backdrop-hue-rotate: hue-rotate(-30deg) !important;
+}
+
+.-backdrop-hue-rotate-15 {
+  --tw-backdrop-hue-rotate: hue-rotate(-15deg) !important;
+}
+
+.backdrop-invert-0 {
+  --tw-backdrop-invert: invert(0) !important;
+}
+
+.backdrop-invert {
+  --tw-backdrop-invert: invert(100%) !important;
+}
+
+.backdrop-opacity-0 {
+  --tw-backdrop-opacity: opacity(0) !important;
+}
+
+.backdrop-opacity-5 {
+  --tw-backdrop-opacity: opacity(0.05) !important;
+}
+
+.backdrop-opacity-10 {
+  --tw-backdrop-opacity: opacity(0.1) !important;
+}
+
+.backdrop-opacity-20 {
+  --tw-backdrop-opacity: opacity(0.2) !important;
+}
+
+.backdrop-opacity-25 {
+  --tw-backdrop-opacity: opacity(0.25) !important;
+}
+
+.backdrop-opacity-30 {
+  --tw-backdrop-opacity: opacity(0.3) !important;
+}
+
+.backdrop-opacity-40 {
+  --tw-backdrop-opacity: opacity(0.4) !important;
+}
+
+.backdrop-opacity-50 {
+  --tw-backdrop-opacity: opacity(0.5) !important;
+}
+
+.backdrop-opacity-60 {
+  --tw-backdrop-opacity: opacity(0.6) !important;
+}
+
+.backdrop-opacity-70 {
+  --tw-backdrop-opacity: opacity(0.7) !important;
+}
+
+.backdrop-opacity-75 {
+  --tw-backdrop-opacity: opacity(0.75) !important;
+}
+
+.backdrop-opacity-80 {
+  --tw-backdrop-opacity: opacity(0.8) !important;
+}
+
+.backdrop-opacity-90 {
+  --tw-backdrop-opacity: opacity(0.9) !important;
+}
+
+.backdrop-opacity-95 {
+  --tw-backdrop-opacity: opacity(0.95) !important;
+}
+
+.backdrop-opacity-100 {
+  --tw-backdrop-opacity: opacity(1) !important;
+}
+
+.backdrop-saturate-0 {
+  --tw-backdrop-saturate: saturate(0) !important;
+}
+
+.backdrop-saturate-50 {
+  --tw-backdrop-saturate: saturate(.5) !important;
+}
+
+.backdrop-saturate-100 {
+  --tw-backdrop-saturate: saturate(1) !important;
+}
+
+.backdrop-saturate-150 {
+  --tw-backdrop-saturate: saturate(1.5) !important;
+}
+
+.backdrop-saturate-200 {
+  --tw-backdrop-saturate: saturate(2) !important;
+}
+
+.backdrop-sepia-0 {
+  --tw-backdrop-sepia: sepia(0) !important;
+}
+
+.backdrop-sepia {
+  --tw-backdrop-sepia: sepia(100%) !important;
+}
+
 .example {
   font-weight: 700;
   color: #ef4444;
@@ -57712,7 +58218,7 @@ video {
   }
 
   .sm\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
     transition-duration: 150ms !important;
   }
@@ -57969,6 +58475,420 @@ video {
     background-blend-mode: luminosity !important;
   }
 
+  .sm\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .sm\:filter-none {
+    filter: none !important;
+  }
+
+  .sm\:blur-0 {
+    --tw-blur: blur(0) !important;
+  }
+
+  .sm\:blur-sm {
+    --tw-blur: blur(4px) !important;
+  }
+
+  .sm\:blur {
+    --tw-blur: blur(8px) !important;
+  }
+
+  .sm\:blur-md {
+    --tw-blur: blur(12px) !important;
+  }
+
+  .sm\:blur-lg {
+    --tw-blur: blur(16px) !important;
+  }
+
+  .sm\:blur-xl {
+    --tw-blur: blur(24px) !important;
+  }
+
+  .sm\:blur-2xl {
+    --tw-blur: blur(40px) !important;
+  }
+
+  .sm\:blur-3xl {
+    --tw-blur: blur(64px) !important;
+  }
+
+  .sm\:brightness-0 {
+    --tw-brightness: brightness(0) !important;
+  }
+
+  .sm\:brightness-50 {
+    --tw-brightness: brightness(.5) !important;
+  }
+
+  .sm\:brightness-75 {
+    --tw-brightness: brightness(.75) !important;
+  }
+
+  .sm\:brightness-90 {
+    --tw-brightness: brightness(.9) !important;
+  }
+
+  .sm\:brightness-95 {
+    --tw-brightness: brightness(.95) !important;
+  }
+
+  .sm\:brightness-100 {
+    --tw-brightness: brightness(1) !important;
+  }
+
+  .sm\:brightness-105 {
+    --tw-brightness: brightness(1.05) !important;
+  }
+
+  .sm\:brightness-110 {
+    --tw-brightness: brightness(1.1) !important;
+  }
+
+  .sm\:brightness-125 {
+    --tw-brightness: brightness(1.25) !important;
+  }
+
+  .sm\:brightness-150 {
+    --tw-brightness: brightness(1.5) !important;
+  }
+
+  .sm\:brightness-200 {
+    --tw-brightness: brightness(2) !important;
+  }
+
+  .sm\:contrast-0 {
+    --tw-contrast: contrast(0) !important;
+  }
+
+  .sm\:contrast-50 {
+    --tw-contrast: contrast(.5) !important;
+  }
+
+  .sm\:contrast-75 {
+    --tw-contrast: contrast(.75) !important;
+  }
+
+  .sm\:contrast-100 {
+    --tw-contrast: contrast(1) !important;
+  }
+
+  .sm\:contrast-125 {
+    --tw-contrast: contrast(1.25) !important;
+  }
+
+  .sm\:contrast-150 {
+    --tw-contrast: contrast(1.5) !important;
+  }
+
+  .sm\:contrast-200 {
+    --tw-contrast: contrast(2) !important;
+  }
+
+  .sm\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)) !important;
+  }
+
+  .sm\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .sm\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .sm\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)) !important;
+  }
+
+  .sm\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)) !important;
+  }
+
+  .sm\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)) !important;
+  }
+
+  .sm\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
+  }
+
+  .sm\:grayscale-0 {
+    --tw-grayscale: grayscale(0) !important;
+  }
+
+  .sm\:grayscale {
+    --tw-grayscale: grayscale(100%) !important;
+  }
+
+  .sm\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .sm\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .sm\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .sm\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .sm\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .sm\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .sm\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .sm\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .sm\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .sm\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .sm\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .sm\:invert-0 {
+    --tw-invert: invert(0) !important;
+  }
+
+  .sm\:invert {
+    --tw-invert: invert(100%) !important;
+  }
+
+  .sm\:saturate-0 {
+    --tw-saturate: saturate(0) !important;
+  }
+
+  .sm\:saturate-50 {
+    --tw-saturate: saturate(.5) !important;
+  }
+
+  .sm\:saturate-100 {
+    --tw-saturate: saturate(1) !important;
+  }
+
+  .sm\:saturate-150 {
+    --tw-saturate: saturate(1.5) !important;
+  }
+
+  .sm\:saturate-200 {
+    --tw-saturate: saturate(2) !important;
+  }
+
+  .sm\:sepia-0 {
+    --tw-sepia: sepia(0) !important;
+  }
+
+  .sm\:sepia {
+    --tw-sepia: sepia(100%) !important;
+  }
+
+  .sm\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .sm\:backdrop-filter-none {
+    backdrop-filter: none !important;
+  }
+
+  .sm\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0) !important;
+  }
+
+  .sm\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5) !important;
+  }
+
+  .sm\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75) !important;
+  }
+
+  .sm\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9) !important;
+  }
+
+  .sm\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95) !important;
+  }
+
+  .sm\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1) !important;
+  }
+
+  .sm\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05) !important;
+  }
+
+  .sm\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1) !important;
+  }
+
+  .sm\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25) !important;
+  }
+
+  .sm\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5) !important;
+  }
+
+  .sm\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2) !important;
+  }
+
+  .sm\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0) !important;
+  }
+
+  .sm\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5) !important;
+  }
+
+  .sm\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75) !important;
+  }
+
+  .sm\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1) !important;
+  }
+
+  .sm\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25) !important;
+  }
+
+  .sm\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5) !important;
+  }
+
+  .sm\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2) !important;
+  }
+
+  .sm\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0) !important;
+  }
+
+  .sm\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%) !important;
+  }
+
+  .sm\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .sm\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .sm\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .sm\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .sm\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .sm\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .sm\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .sm\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .sm\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .sm\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .sm\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .sm\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0) !important;
+  }
+
+  .sm\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%) !important;
+  }
+
+  .sm\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0) !important;
+  }
+
+  .sm\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5) !important;
+  }
+
+  .sm\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1) !important;
+  }
+
+  .sm\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5) !important;
+  }
+
+  .sm\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2) !important;
+  }
+
+  .sm\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0) !important;
+  }
+
+  .sm\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%) !important;
+  }
+
   .sm\:example {
     font-weight: 700;
     color: #ef4444;
@@ -86409,7 +87329,7 @@ video {
   }
 
   .md\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
     transition-duration: 150ms !important;
   }
@@ -86666,6 +87586,420 @@ video {
     background-blend-mode: luminosity !important;
   }
 
+  .md\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .md\:filter-none {
+    filter: none !important;
+  }
+
+  .md\:blur-0 {
+    --tw-blur: blur(0) !important;
+  }
+
+  .md\:blur-sm {
+    --tw-blur: blur(4px) !important;
+  }
+
+  .md\:blur {
+    --tw-blur: blur(8px) !important;
+  }
+
+  .md\:blur-md {
+    --tw-blur: blur(12px) !important;
+  }
+
+  .md\:blur-lg {
+    --tw-blur: blur(16px) !important;
+  }
+
+  .md\:blur-xl {
+    --tw-blur: blur(24px) !important;
+  }
+
+  .md\:blur-2xl {
+    --tw-blur: blur(40px) !important;
+  }
+
+  .md\:blur-3xl {
+    --tw-blur: blur(64px) !important;
+  }
+
+  .md\:brightness-0 {
+    --tw-brightness: brightness(0) !important;
+  }
+
+  .md\:brightness-50 {
+    --tw-brightness: brightness(.5) !important;
+  }
+
+  .md\:brightness-75 {
+    --tw-brightness: brightness(.75) !important;
+  }
+
+  .md\:brightness-90 {
+    --tw-brightness: brightness(.9) !important;
+  }
+
+  .md\:brightness-95 {
+    --tw-brightness: brightness(.95) !important;
+  }
+
+  .md\:brightness-100 {
+    --tw-brightness: brightness(1) !important;
+  }
+
+  .md\:brightness-105 {
+    --tw-brightness: brightness(1.05) !important;
+  }
+
+  .md\:brightness-110 {
+    --tw-brightness: brightness(1.1) !important;
+  }
+
+  .md\:brightness-125 {
+    --tw-brightness: brightness(1.25) !important;
+  }
+
+  .md\:brightness-150 {
+    --tw-brightness: brightness(1.5) !important;
+  }
+
+  .md\:brightness-200 {
+    --tw-brightness: brightness(2) !important;
+  }
+
+  .md\:contrast-0 {
+    --tw-contrast: contrast(0) !important;
+  }
+
+  .md\:contrast-50 {
+    --tw-contrast: contrast(.5) !important;
+  }
+
+  .md\:contrast-75 {
+    --tw-contrast: contrast(.75) !important;
+  }
+
+  .md\:contrast-100 {
+    --tw-contrast: contrast(1) !important;
+  }
+
+  .md\:contrast-125 {
+    --tw-contrast: contrast(1.25) !important;
+  }
+
+  .md\:contrast-150 {
+    --tw-contrast: contrast(1.5) !important;
+  }
+
+  .md\:contrast-200 {
+    --tw-contrast: contrast(2) !important;
+  }
+
+  .md\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)) !important;
+  }
+
+  .md\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .md\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .md\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)) !important;
+  }
+
+  .md\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)) !important;
+  }
+
+  .md\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)) !important;
+  }
+
+  .md\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
+  }
+
+  .md\:grayscale-0 {
+    --tw-grayscale: grayscale(0) !important;
+  }
+
+  .md\:grayscale {
+    --tw-grayscale: grayscale(100%) !important;
+  }
+
+  .md\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .md\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .md\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .md\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .md\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .md\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .md\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .md\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .md\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .md\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .md\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .md\:invert-0 {
+    --tw-invert: invert(0) !important;
+  }
+
+  .md\:invert {
+    --tw-invert: invert(100%) !important;
+  }
+
+  .md\:saturate-0 {
+    --tw-saturate: saturate(0) !important;
+  }
+
+  .md\:saturate-50 {
+    --tw-saturate: saturate(.5) !important;
+  }
+
+  .md\:saturate-100 {
+    --tw-saturate: saturate(1) !important;
+  }
+
+  .md\:saturate-150 {
+    --tw-saturate: saturate(1.5) !important;
+  }
+
+  .md\:saturate-200 {
+    --tw-saturate: saturate(2) !important;
+  }
+
+  .md\:sepia-0 {
+    --tw-sepia: sepia(0) !important;
+  }
+
+  .md\:sepia {
+    --tw-sepia: sepia(100%) !important;
+  }
+
+  .md\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .md\:backdrop-filter-none {
+    backdrop-filter: none !important;
+  }
+
+  .md\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0) !important;
+  }
+
+  .md\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5) !important;
+  }
+
+  .md\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75) !important;
+  }
+
+  .md\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9) !important;
+  }
+
+  .md\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95) !important;
+  }
+
+  .md\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1) !important;
+  }
+
+  .md\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05) !important;
+  }
+
+  .md\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1) !important;
+  }
+
+  .md\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25) !important;
+  }
+
+  .md\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5) !important;
+  }
+
+  .md\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2) !important;
+  }
+
+  .md\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0) !important;
+  }
+
+  .md\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5) !important;
+  }
+
+  .md\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75) !important;
+  }
+
+  .md\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1) !important;
+  }
+
+  .md\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25) !important;
+  }
+
+  .md\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5) !important;
+  }
+
+  .md\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2) !important;
+  }
+
+  .md\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0) !important;
+  }
+
+  .md\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%) !important;
+  }
+
+  .md\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .md\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .md\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .md\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .md\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .md\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .md\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .md\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .md\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .md\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .md\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .md\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0) !important;
+  }
+
+  .md\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%) !important;
+  }
+
+  .md\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0) !important;
+  }
+
+  .md\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5) !important;
+  }
+
+  .md\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1) !important;
+  }
+
+  .md\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5) !important;
+  }
+
+  .md\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2) !important;
+  }
+
+  .md\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0) !important;
+  }
+
+  .md\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%) !important;
+  }
+
   .md\:example {
     font-weight: 700;
     color: #ef4444;
@@ -115106,7 +116440,7 @@ video {
   }
 
   .lg\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
     transition-duration: 150ms !important;
   }
@@ -115363,6 +116697,420 @@ video {
     background-blend-mode: luminosity !important;
   }
 
+  .lg\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .lg\:filter-none {
+    filter: none !important;
+  }
+
+  .lg\:blur-0 {
+    --tw-blur: blur(0) !important;
+  }
+
+  .lg\:blur-sm {
+    --tw-blur: blur(4px) !important;
+  }
+
+  .lg\:blur {
+    --tw-blur: blur(8px) !important;
+  }
+
+  .lg\:blur-md {
+    --tw-blur: blur(12px) !important;
+  }
+
+  .lg\:blur-lg {
+    --tw-blur: blur(16px) !important;
+  }
+
+  .lg\:blur-xl {
+    --tw-blur: blur(24px) !important;
+  }
+
+  .lg\:blur-2xl {
+    --tw-blur: blur(40px) !important;
+  }
+
+  .lg\:blur-3xl {
+    --tw-blur: blur(64px) !important;
+  }
+
+  .lg\:brightness-0 {
+    --tw-brightness: brightness(0) !important;
+  }
+
+  .lg\:brightness-50 {
+    --tw-brightness: brightness(.5) !important;
+  }
+
+  .lg\:brightness-75 {
+    --tw-brightness: brightness(.75) !important;
+  }
+
+  .lg\:brightness-90 {
+    --tw-brightness: brightness(.9) !important;
+  }
+
+  .lg\:brightness-95 {
+    --tw-brightness: brightness(.95) !important;
+  }
+
+  .lg\:brightness-100 {
+    --tw-brightness: brightness(1) !important;
+  }
+
+  .lg\:brightness-105 {
+    --tw-brightness: brightness(1.05) !important;
+  }
+
+  .lg\:brightness-110 {
+    --tw-brightness: brightness(1.1) !important;
+  }
+
+  .lg\:brightness-125 {
+    --tw-brightness: brightness(1.25) !important;
+  }
+
+  .lg\:brightness-150 {
+    --tw-brightness: brightness(1.5) !important;
+  }
+
+  .lg\:brightness-200 {
+    --tw-brightness: brightness(2) !important;
+  }
+
+  .lg\:contrast-0 {
+    --tw-contrast: contrast(0) !important;
+  }
+
+  .lg\:contrast-50 {
+    --tw-contrast: contrast(.5) !important;
+  }
+
+  .lg\:contrast-75 {
+    --tw-contrast: contrast(.75) !important;
+  }
+
+  .lg\:contrast-100 {
+    --tw-contrast: contrast(1) !important;
+  }
+
+  .lg\:contrast-125 {
+    --tw-contrast: contrast(1.25) !important;
+  }
+
+  .lg\:contrast-150 {
+    --tw-contrast: contrast(1.5) !important;
+  }
+
+  .lg\:contrast-200 {
+    --tw-contrast: contrast(2) !important;
+  }
+
+  .lg\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)) !important;
+  }
+
+  .lg\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .lg\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .lg\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)) !important;
+  }
+
+  .lg\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)) !important;
+  }
+
+  .lg\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)) !important;
+  }
+
+  .lg\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
+  }
+
+  .lg\:grayscale-0 {
+    --tw-grayscale: grayscale(0) !important;
+  }
+
+  .lg\:grayscale {
+    --tw-grayscale: grayscale(100%) !important;
+  }
+
+  .lg\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .lg\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .lg\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .lg\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .lg\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .lg\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .lg\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .lg\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .lg\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .lg\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .lg\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .lg\:invert-0 {
+    --tw-invert: invert(0) !important;
+  }
+
+  .lg\:invert {
+    --tw-invert: invert(100%) !important;
+  }
+
+  .lg\:saturate-0 {
+    --tw-saturate: saturate(0) !important;
+  }
+
+  .lg\:saturate-50 {
+    --tw-saturate: saturate(.5) !important;
+  }
+
+  .lg\:saturate-100 {
+    --tw-saturate: saturate(1) !important;
+  }
+
+  .lg\:saturate-150 {
+    --tw-saturate: saturate(1.5) !important;
+  }
+
+  .lg\:saturate-200 {
+    --tw-saturate: saturate(2) !important;
+  }
+
+  .lg\:sepia-0 {
+    --tw-sepia: sepia(0) !important;
+  }
+
+  .lg\:sepia {
+    --tw-sepia: sepia(100%) !important;
+  }
+
+  .lg\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .lg\:backdrop-filter-none {
+    backdrop-filter: none !important;
+  }
+
+  .lg\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0) !important;
+  }
+
+  .lg\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5) !important;
+  }
+
+  .lg\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75) !important;
+  }
+
+  .lg\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9) !important;
+  }
+
+  .lg\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95) !important;
+  }
+
+  .lg\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1) !important;
+  }
+
+  .lg\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05) !important;
+  }
+
+  .lg\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1) !important;
+  }
+
+  .lg\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25) !important;
+  }
+
+  .lg\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5) !important;
+  }
+
+  .lg\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2) !important;
+  }
+
+  .lg\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0) !important;
+  }
+
+  .lg\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5) !important;
+  }
+
+  .lg\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75) !important;
+  }
+
+  .lg\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1) !important;
+  }
+
+  .lg\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25) !important;
+  }
+
+  .lg\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5) !important;
+  }
+
+  .lg\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2) !important;
+  }
+
+  .lg\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0) !important;
+  }
+
+  .lg\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%) !important;
+  }
+
+  .lg\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .lg\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .lg\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .lg\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .lg\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .lg\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .lg\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .lg\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .lg\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .lg\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .lg\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .lg\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0) !important;
+  }
+
+  .lg\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%) !important;
+  }
+
+  .lg\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0) !important;
+  }
+
+  .lg\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5) !important;
+  }
+
+  .lg\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1) !important;
+  }
+
+  .lg\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5) !important;
+  }
+
+  .lg\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2) !important;
+  }
+
+  .lg\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0) !important;
+  }
+
+  .lg\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%) !important;
+  }
+
   .lg\:example {
     font-weight: 700;
     color: #ef4444;
@@ -143803,7 +145551,7 @@ video {
   }
 
   .xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
     transition-duration: 150ms !important;
   }
@@ -144060,6 +145808,420 @@ video {
     background-blend-mode: luminosity !important;
   }
 
+  .xl\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .xl\:filter-none {
+    filter: none !important;
+  }
+
+  .xl\:blur-0 {
+    --tw-blur: blur(0) !important;
+  }
+
+  .xl\:blur-sm {
+    --tw-blur: blur(4px) !important;
+  }
+
+  .xl\:blur {
+    --tw-blur: blur(8px) !important;
+  }
+
+  .xl\:blur-md {
+    --tw-blur: blur(12px) !important;
+  }
+
+  .xl\:blur-lg {
+    --tw-blur: blur(16px) !important;
+  }
+
+  .xl\:blur-xl {
+    --tw-blur: blur(24px) !important;
+  }
+
+  .xl\:blur-2xl {
+    --tw-blur: blur(40px) !important;
+  }
+
+  .xl\:blur-3xl {
+    --tw-blur: blur(64px) !important;
+  }
+
+  .xl\:brightness-0 {
+    --tw-brightness: brightness(0) !important;
+  }
+
+  .xl\:brightness-50 {
+    --tw-brightness: brightness(.5) !important;
+  }
+
+  .xl\:brightness-75 {
+    --tw-brightness: brightness(.75) !important;
+  }
+
+  .xl\:brightness-90 {
+    --tw-brightness: brightness(.9) !important;
+  }
+
+  .xl\:brightness-95 {
+    --tw-brightness: brightness(.95) !important;
+  }
+
+  .xl\:brightness-100 {
+    --tw-brightness: brightness(1) !important;
+  }
+
+  .xl\:brightness-105 {
+    --tw-brightness: brightness(1.05) !important;
+  }
+
+  .xl\:brightness-110 {
+    --tw-brightness: brightness(1.1) !important;
+  }
+
+  .xl\:brightness-125 {
+    --tw-brightness: brightness(1.25) !important;
+  }
+
+  .xl\:brightness-150 {
+    --tw-brightness: brightness(1.5) !important;
+  }
+
+  .xl\:brightness-200 {
+    --tw-brightness: brightness(2) !important;
+  }
+
+  .xl\:contrast-0 {
+    --tw-contrast: contrast(0) !important;
+  }
+
+  .xl\:contrast-50 {
+    --tw-contrast: contrast(.5) !important;
+  }
+
+  .xl\:contrast-75 {
+    --tw-contrast: contrast(.75) !important;
+  }
+
+  .xl\:contrast-100 {
+    --tw-contrast: contrast(1) !important;
+  }
+
+  .xl\:contrast-125 {
+    --tw-contrast: contrast(1.25) !important;
+  }
+
+  .xl\:contrast-150 {
+    --tw-contrast: contrast(1.5) !important;
+  }
+
+  .xl\:contrast-200 {
+    --tw-contrast: contrast(2) !important;
+  }
+
+  .xl\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)) !important;
+  }
+
+  .xl\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .xl\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .xl\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)) !important;
+  }
+
+  .xl\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)) !important;
+  }
+
+  .xl\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)) !important;
+  }
+
+  .xl\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
+  }
+
+  .xl\:grayscale-0 {
+    --tw-grayscale: grayscale(0) !important;
+  }
+
+  .xl\:grayscale {
+    --tw-grayscale: grayscale(100%) !important;
+  }
+
+  .xl\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .xl\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .xl\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .xl\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .xl\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .xl\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .xl\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .xl\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .xl\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .xl\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .xl\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .xl\:invert-0 {
+    --tw-invert: invert(0) !important;
+  }
+
+  .xl\:invert {
+    --tw-invert: invert(100%) !important;
+  }
+
+  .xl\:saturate-0 {
+    --tw-saturate: saturate(0) !important;
+  }
+
+  .xl\:saturate-50 {
+    --tw-saturate: saturate(.5) !important;
+  }
+
+  .xl\:saturate-100 {
+    --tw-saturate: saturate(1) !important;
+  }
+
+  .xl\:saturate-150 {
+    --tw-saturate: saturate(1.5) !important;
+  }
+
+  .xl\:saturate-200 {
+    --tw-saturate: saturate(2) !important;
+  }
+
+  .xl\:sepia-0 {
+    --tw-sepia: sepia(0) !important;
+  }
+
+  .xl\:sepia {
+    --tw-sepia: sepia(100%) !important;
+  }
+
+  .xl\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .xl\:backdrop-filter-none {
+    backdrop-filter: none !important;
+  }
+
+  .xl\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0) !important;
+  }
+
+  .xl\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5) !important;
+  }
+
+  .xl\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75) !important;
+  }
+
+  .xl\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9) !important;
+  }
+
+  .xl\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95) !important;
+  }
+
+  .xl\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1) !important;
+  }
+
+  .xl\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05) !important;
+  }
+
+  .xl\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1) !important;
+  }
+
+  .xl\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25) !important;
+  }
+
+  .xl\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5) !important;
+  }
+
+  .xl\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2) !important;
+  }
+
+  .xl\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0) !important;
+  }
+
+  .xl\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5) !important;
+  }
+
+  .xl\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75) !important;
+  }
+
+  .xl\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1) !important;
+  }
+
+  .xl\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25) !important;
+  }
+
+  .xl\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5) !important;
+  }
+
+  .xl\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2) !important;
+  }
+
+  .xl\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0) !important;
+  }
+
+  .xl\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%) !important;
+  }
+
+  .xl\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .xl\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .xl\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .xl\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .xl\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .xl\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .xl\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .xl\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .xl\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .xl\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .xl\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .xl\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0) !important;
+  }
+
+  .xl\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%) !important;
+  }
+
+  .xl\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0) !important;
+  }
+
+  .xl\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5) !important;
+  }
+
+  .xl\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1) !important;
+  }
+
+  .xl\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5) !important;
+  }
+
+  .xl\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2) !important;
+  }
+
+  .xl\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0) !important;
+  }
+
+  .xl\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%) !important;
+  }
+
   .xl\:example {
     font-weight: 700;
     color: #ef4444;
@@ -172500,7 +174662,7 @@ video {
   }
 
   .\32xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
     transition-duration: 150ms !important;
   }
@@ -172757,6 +174919,420 @@ video {
     background-blend-mode: luminosity !important;
   }
 
+  .\32xl\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .\32xl\:filter-none {
+    filter: none !important;
+  }
+
+  .\32xl\:blur-0 {
+    --tw-blur: blur(0) !important;
+  }
+
+  .\32xl\:blur-sm {
+    --tw-blur: blur(4px) !important;
+  }
+
+  .\32xl\:blur {
+    --tw-blur: blur(8px) !important;
+  }
+
+  .\32xl\:blur-md {
+    --tw-blur: blur(12px) !important;
+  }
+
+  .\32xl\:blur-lg {
+    --tw-blur: blur(16px) !important;
+  }
+
+  .\32xl\:blur-xl {
+    --tw-blur: blur(24px) !important;
+  }
+
+  .\32xl\:blur-2xl {
+    --tw-blur: blur(40px) !important;
+  }
+
+  .\32xl\:blur-3xl {
+    --tw-blur: blur(64px) !important;
+  }
+
+  .\32xl\:brightness-0 {
+    --tw-brightness: brightness(0) !important;
+  }
+
+  .\32xl\:brightness-50 {
+    --tw-brightness: brightness(.5) !important;
+  }
+
+  .\32xl\:brightness-75 {
+    --tw-brightness: brightness(.75) !important;
+  }
+
+  .\32xl\:brightness-90 {
+    --tw-brightness: brightness(.9) !important;
+  }
+
+  .\32xl\:brightness-95 {
+    --tw-brightness: brightness(.95) !important;
+  }
+
+  .\32xl\:brightness-100 {
+    --tw-brightness: brightness(1) !important;
+  }
+
+  .\32xl\:brightness-105 {
+    --tw-brightness: brightness(1.05) !important;
+  }
+
+  .\32xl\:brightness-110 {
+    --tw-brightness: brightness(1.1) !important;
+  }
+
+  .\32xl\:brightness-125 {
+    --tw-brightness: brightness(1.25) !important;
+  }
+
+  .\32xl\:brightness-150 {
+    --tw-brightness: brightness(1.5) !important;
+  }
+
+  .\32xl\:brightness-200 {
+    --tw-brightness: brightness(2) !important;
+  }
+
+  .\32xl\:contrast-0 {
+    --tw-contrast: contrast(0) !important;
+  }
+
+  .\32xl\:contrast-50 {
+    --tw-contrast: contrast(.5) !important;
+  }
+
+  .\32xl\:contrast-75 {
+    --tw-contrast: contrast(.75) !important;
+  }
+
+  .\32xl\:contrast-100 {
+    --tw-contrast: contrast(1) !important;
+  }
+
+  .\32xl\:contrast-125 {
+    --tw-contrast: contrast(1.25) !important;
+  }
+
+  .\32xl\:contrast-150 {
+    --tw-contrast: contrast(1.5) !important;
+  }
+
+  .\32xl\:contrast-200 {
+    --tw-contrast: contrast(2) !important;
+  }
+
+  .\32xl\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05)) !important;
+  }
+
+  .\32xl\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .\32xl\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)) !important;
+  }
+
+  .\32xl\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)) !important;
+  }
+
+  .\32xl\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)) !important;
+  }
+
+  .\32xl\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)) !important;
+  }
+
+  .\32xl\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
+  }
+
+  .\32xl\:grayscale-0 {
+    --tw-grayscale: grayscale(0) !important;
+  }
+
+  .\32xl\:grayscale {
+    --tw-grayscale: grayscale(100%) !important;
+  }
+
+  .\32xl\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .\32xl\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .\32xl\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .\32xl\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .\32xl\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .\32xl\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .\32xl\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .\32xl\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .\32xl\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .\32xl\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .\32xl\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .\32xl\:invert-0 {
+    --tw-invert: invert(0) !important;
+  }
+
+  .\32xl\:invert {
+    --tw-invert: invert(100%) !important;
+  }
+
+  .\32xl\:saturate-0 {
+    --tw-saturate: saturate(0) !important;
+  }
+
+  .\32xl\:saturate-50 {
+    --tw-saturate: saturate(.5) !important;
+  }
+
+  .\32xl\:saturate-100 {
+    --tw-saturate: saturate(1) !important;
+  }
+
+  .\32xl\:saturate-150 {
+    --tw-saturate: saturate(1.5) !important;
+  }
+
+  .\32xl\:saturate-200 {
+    --tw-saturate: saturate(2) !important;
+  }
+
+  .\32xl\:sepia-0 {
+    --tw-sepia: sepia(0) !important;
+  }
+
+  .\32xl\:sepia {
+    --tw-sepia: sepia(100%) !important;
+  }
+
+  .\32xl\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/) !important;
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/) !important;
+    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) !important;
+  }
+
+  .\32xl\:backdrop-filter-none {
+    backdrop-filter: none !important;
+  }
+
+  .\32xl\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0) !important;
+  }
+
+  .\32xl\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5) !important;
+  }
+
+  .\32xl\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75) !important;
+  }
+
+  .\32xl\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9) !important;
+  }
+
+  .\32xl\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95) !important;
+  }
+
+  .\32xl\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1) !important;
+  }
+
+  .\32xl\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05) !important;
+  }
+
+  .\32xl\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1) !important;
+  }
+
+  .\32xl\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25) !important;
+  }
+
+  .\32xl\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5) !important;
+  }
+
+  .\32xl\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2) !important;
+  }
+
+  .\32xl\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0) !important;
+  }
+
+  .\32xl\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5) !important;
+  }
+
+  .\32xl\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75) !important;
+  }
+
+  .\32xl\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1) !important;
+  }
+
+  .\32xl\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25) !important;
+  }
+
+  .\32xl\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5) !important;
+  }
+
+  .\32xl\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2) !important;
+  }
+
+  .\32xl\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0) !important;
+  }
+
+  .\32xl\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%) !important;
+  }
+
+  .\32xl\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg) !important;
+  }
+
+  .\32xl\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg) !important;
+  }
+
+  .\32xl\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg) !important;
+  }
+
+  .\32xl\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg) !important;
+  }
+
+  .\32xl\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg) !important;
+  }
+
+  .\32xl\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg) !important;
+  }
+
+  .\32xl\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg) !important;
+  }
+
+  .\32xl\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg) !important;
+  }
+
+  .\32xl\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg) !important;
+  }
+
+  .\32xl\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg) !important;
+  }
+
+  .\32xl\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg) !important;
+  }
+
+  .\32xl\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0) !important;
+  }
+
+  .\32xl\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%) !important;
+  }
+
+  .\32xl\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0) !important;
+  }
+
+  .\32xl\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5) !important;
+  }
+
+  .\32xl\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1) !important;
+  }
+
+  .\32xl\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5) !important;
+  }
+
+  .\32xl\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2) !important;
+  }
+
+  .\32xl\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0) !important;
+  }
+
+  .\32xl\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%) !important;
+  }
+
   .\32xl\:example {
     font-weight: 700;
     color: #ef4444;
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
index 0a84656c7d0c..d34dc526fae1 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -26429,7 +26429,7 @@ video {
 }
 
 .transition {
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -26717,6 +26717,512 @@ video {
   background-blend-mode: luminosity;
 }
 
+.filter {
+  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+  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);
+}
+
+.filter-none {
+  filter: none;
+}
+
+.blur-0 {
+  --tw-blur: blur(0);
+}
+
+.blur-sm {
+  --tw-blur: blur(4px);
+}
+
+.blur {
+  --tw-blur: blur(8px);
+}
+
+.blur-md {
+  --tw-blur: blur(12px);
+}
+
+.blur-lg {
+  --tw-blur: blur(16px);
+}
+
+.blur-xl {
+  --tw-blur: blur(24px);
+}
+
+.blur-2xl {
+  --tw-blur: blur(40px);
+}
+
+.blur-3xl {
+  --tw-blur: blur(64px);
+}
+
+.brightness-0 {
+  --tw-brightness: brightness(0);
+}
+
+.brightness-50 {
+  --tw-brightness: brightness(.5);
+}
+
+.brightness-75 {
+  --tw-brightness: brightness(.75);
+}
+
+.brightness-90 {
+  --tw-brightness: brightness(.9);
+}
+
+.brightness-95 {
+  --tw-brightness: brightness(.95);
+}
+
+.brightness-100 {
+  --tw-brightness: brightness(1);
+}
+
+.brightness-105 {
+  --tw-brightness: brightness(1.05);
+}
+
+.brightness-110 {
+  --tw-brightness: brightness(1.1);
+}
+
+.brightness-125 {
+  --tw-brightness: brightness(1.25);
+}
+
+.brightness-150 {
+  --tw-brightness: brightness(1.5);
+}
+
+.brightness-200 {
+  --tw-brightness: brightness(2);
+}
+
+.contrast-0 {
+  --tw-contrast: contrast(0);
+}
+
+.contrast-50 {
+  --tw-contrast: contrast(.5);
+}
+
+.contrast-75 {
+  --tw-contrast: contrast(.75);
+}
+
+.contrast-100 {
+  --tw-contrast: contrast(1);
+}
+
+.contrast-125 {
+  --tw-contrast: contrast(1.25);
+}
+
+.contrast-150 {
+  --tw-contrast: contrast(1.5);
+}
+
+.contrast-200 {
+  --tw-contrast: contrast(2);
+}
+
+.drop-shadow-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+}
+
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+}
+
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+}
+
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+}
+
+.drop-shadow-xl {
+  --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+}
+
+.drop-shadow-2xl {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+}
+
+.drop-shadow-none {
+  --tw-drop-shadow: drop-shadow(0 0 #0000);
+}
+
+.grayscale-0 {
+  --tw-grayscale: grayscale(0);
+}
+
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+}
+
+.hue-rotate-0 {
+  --tw-hue-rotate: hue-rotate(0deg);
+}
+
+.hue-rotate-15 {
+  --tw-hue-rotate: hue-rotate(15deg);
+}
+
+.hue-rotate-30 {
+  --tw-hue-rotate: hue-rotate(30deg);
+}
+
+.hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(60deg);
+}
+
+.hue-rotate-90 {
+  --tw-hue-rotate: hue-rotate(90deg);
+}
+
+.hue-rotate-180 {
+  --tw-hue-rotate: hue-rotate(180deg);
+}
+
+.-hue-rotate-180 {
+  --tw-hue-rotate: hue-rotate(-180deg);
+}
+
+.-hue-rotate-90 {
+  --tw-hue-rotate: hue-rotate(-90deg);
+}
+
+.-hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(-60deg);
+}
+
+.-hue-rotate-30 {
+  --tw-hue-rotate: hue-rotate(-30deg);
+}
+
+.-hue-rotate-15 {
+  --tw-hue-rotate: hue-rotate(-15deg);
+}
+
+.invert-0 {
+  --tw-invert: invert(0);
+}
+
+.invert {
+  --tw-invert: invert(100%);
+}
+
+.saturate-0 {
+  --tw-saturate: saturate(0);
+}
+
+.saturate-50 {
+  --tw-saturate: saturate(.5);
+}
+
+.saturate-100 {
+  --tw-saturate: saturate(1);
+}
+
+.saturate-150 {
+  --tw-saturate: saturate(1.5);
+}
+
+.saturate-200 {
+  --tw-saturate: saturate(2);
+}
+
+.sepia-0 {
+  --tw-sepia: sepia(0);
+}
+
+.sepia {
+  --tw-sepia: sepia(100%);
+}
+
+.backdrop-filter {
+  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+  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-none {
+  backdrop-filter: none;
+}
+
+.backdrop-blur-0 {
+  --tw-backdrop-blur: blur(0);
+}
+
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+}
+
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+}
+
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+}
+
+.backdrop-blur-lg {
+  --tw-backdrop-blur: blur(16px);
+}
+
+.backdrop-blur-xl {
+  --tw-backdrop-blur: blur(24px);
+}
+
+.backdrop-blur-2xl {
+  --tw-backdrop-blur: blur(40px);
+}
+
+.backdrop-blur-3xl {
+  --tw-backdrop-blur: blur(64px);
+}
+
+.backdrop-brightness-0 {
+  --tw-backdrop-brightness: brightness(0);
+}
+
+.backdrop-brightness-50 {
+  --tw-backdrop-brightness: brightness(.5);
+}
+
+.backdrop-brightness-75 {
+  --tw-backdrop-brightness: brightness(.75);
+}
+
+.backdrop-brightness-90 {
+  --tw-backdrop-brightness: brightness(.9);
+}
+
+.backdrop-brightness-95 {
+  --tw-backdrop-brightness: brightness(.95);
+}
+
+.backdrop-brightness-100 {
+  --tw-backdrop-brightness: brightness(1);
+}
+
+.backdrop-brightness-105 {
+  --tw-backdrop-brightness: brightness(1.05);
+}
+
+.backdrop-brightness-110 {
+  --tw-backdrop-brightness: brightness(1.1);
+}
+
+.backdrop-brightness-125 {
+  --tw-backdrop-brightness: brightness(1.25);
+}
+
+.backdrop-brightness-150 {
+  --tw-backdrop-brightness: brightness(1.5);
+}
+
+.backdrop-brightness-200 {
+  --tw-backdrop-brightness: brightness(2);
+}
+
+.backdrop-contrast-0 {
+  --tw-backdrop-contrast: contrast(0);
+}
+
+.backdrop-contrast-50 {
+  --tw-backdrop-contrast: contrast(.5);
+}
+
+.backdrop-contrast-75 {
+  --tw-backdrop-contrast: contrast(.75);
+}
+
+.backdrop-contrast-100 {
+  --tw-backdrop-contrast: contrast(1);
+}
+
+.backdrop-contrast-125 {
+  --tw-backdrop-contrast: contrast(1.25);
+}
+
+.backdrop-contrast-150 {
+  --tw-backdrop-contrast: contrast(1.5);
+}
+
+.backdrop-contrast-200 {
+  --tw-backdrop-contrast: contrast(2);
+}
+
+.backdrop-grayscale-0 {
+  --tw-backdrop-grayscale: grayscale(0);
+}
+
+.backdrop-grayscale {
+  --tw-backdrop-grayscale: grayscale(100%);
+}
+
+.backdrop-hue-rotate-0 {
+  --tw-backdrop-hue-rotate: hue-rotate(0deg);
+}
+
+.backdrop-hue-rotate-15 {
+  --tw-backdrop-hue-rotate: hue-rotate(15deg);
+}
+
+.backdrop-hue-rotate-30 {
+  --tw-backdrop-hue-rotate: hue-rotate(30deg);
+}
+
+.backdrop-hue-rotate-60 {
+  --tw-backdrop-hue-rotate: hue-rotate(60deg);
+}
+
+.backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(90deg);
+}
+
+.backdrop-hue-rotate-180 {
+  --tw-backdrop-hue-rotate: hue-rotate(180deg);
+}
+
+.-backdrop-hue-rotate-180 {
+  --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+}
+
+.-backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+}
+
+.-backdrop-hue-rotate-60 {
+  --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+}
+
+.-backdrop-hue-rotate-30 {
+  --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+}
+
+.-backdrop-hue-rotate-15 {
+  --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+}
+
+.backdrop-invert-0 {
+  --tw-backdrop-invert: invert(0);
+}
+
+.backdrop-invert {
+  --tw-backdrop-invert: invert(100%);
+}
+
+.backdrop-opacity-0 {
+  --tw-backdrop-opacity: opacity(0);
+}
+
+.backdrop-opacity-5 {
+  --tw-backdrop-opacity: opacity(0.05);
+}
+
+.backdrop-opacity-10 {
+  --tw-backdrop-opacity: opacity(0.1);
+}
+
+.backdrop-opacity-20 {
+  --tw-backdrop-opacity: opacity(0.2);
+}
+
+.backdrop-opacity-25 {
+  --tw-backdrop-opacity: opacity(0.25);
+}
+
+.backdrop-opacity-30 {
+  --tw-backdrop-opacity: opacity(0.3);
+}
+
+.backdrop-opacity-40 {
+  --tw-backdrop-opacity: opacity(0.4);
+}
+
+.backdrop-opacity-50 {
+  --tw-backdrop-opacity: opacity(0.5);
+}
+
+.backdrop-opacity-60 {
+  --tw-backdrop-opacity: opacity(0.6);
+}
+
+.backdrop-opacity-70 {
+  --tw-backdrop-opacity: opacity(0.7);
+}
+
+.backdrop-opacity-75 {
+  --tw-backdrop-opacity: opacity(0.75);
+}
+
+.backdrop-opacity-80 {
+  --tw-backdrop-opacity: opacity(0.8);
+}
+
+.backdrop-opacity-90 {
+  --tw-backdrop-opacity: opacity(0.9);
+}
+
+.backdrop-opacity-95 {
+  --tw-backdrop-opacity: opacity(0.95);
+}
+
+.backdrop-opacity-100 {
+  --tw-backdrop-opacity: opacity(1);
+}
+
+.backdrop-saturate-0 {
+  --tw-backdrop-saturate: saturate(0);
+}
+
+.backdrop-saturate-50 {
+  --tw-backdrop-saturate: saturate(.5);
+}
+
+.backdrop-saturate-100 {
+  --tw-backdrop-saturate: saturate(1);
+}
+
+.backdrop-saturate-150 {
+  --tw-backdrop-saturate: saturate(1.5);
+}
+
+.backdrop-saturate-200 {
+  --tw-backdrop-saturate: saturate(2);
+}
+
+.backdrop-sepia-0 {
+  --tw-backdrop-sepia: sepia(0);
+}
+
+.backdrop-sepia {
+  --tw-backdrop-sepia: sepia(100%);
+}
+
 .example {
   font-weight: 700;
   color: #ef4444;
@@ -52600,7 +53106,7 @@ video {
   }
 
   .sm\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -52857,6 +53363,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .sm\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .sm\:filter-none {
+    filter: none;
+  }
+
+  .sm\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .sm\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .sm\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .sm\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .sm\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .sm\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .sm\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .sm\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .sm\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .sm\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .sm\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .sm\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .sm\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .sm\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .sm\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .sm\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .sm\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .sm\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .sm\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .sm\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .sm\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .sm\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .sm\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .sm\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .sm\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .sm\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .sm\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .sm\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .sm\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .sm\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .sm\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .sm\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .sm\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .sm\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .sm\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .sm\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .sm\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .sm\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .sm\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .sm\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .sm\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .sm\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .sm\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .sm\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .sm\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .sm\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .sm\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .sm\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .sm\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .sm\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .sm\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .sm\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .sm\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .sm\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .sm\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .sm\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .sm\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .sm\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .sm\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .sm\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .sm\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .sm\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .sm\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .sm\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .sm\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .sm\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .sm\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .sm\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .sm\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .sm\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .sm\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .sm\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .sm\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .sm\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .sm\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .sm\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .sm\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .sm\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .sm\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .sm\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .sm\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .sm\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .sm\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .sm\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .sm\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .sm\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .sm\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .sm\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .sm\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .sm\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .sm\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .sm\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .sm\:example {
     font-weight: 700;
     color: #ef4444;
@@ -78741,7 +79661,7 @@ video {
   }
 
   .md\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -78998,6 +79918,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .md\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .md\:filter-none {
+    filter: none;
+  }
+
+  .md\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .md\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .md\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .md\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .md\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .md\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .md\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .md\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .md\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .md\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .md\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .md\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .md\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .md\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .md\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .md\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .md\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .md\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .md\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .md\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .md\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .md\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .md\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .md\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .md\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .md\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .md\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .md\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .md\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .md\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .md\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .md\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .md\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .md\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .md\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .md\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .md\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .md\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .md\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .md\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .md\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .md\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .md\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .md\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .md\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .md\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .md\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .md\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .md\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .md\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .md\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .md\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .md\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .md\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .md\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .md\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .md\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .md\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .md\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .md\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .md\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .md\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .md\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .md\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .md\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .md\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .md\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .md\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .md\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .md\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .md\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .md\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .md\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .md\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .md\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .md\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .md\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .md\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .md\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .md\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .md\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .md\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .md\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .md\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .md\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .md\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .md\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .md\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .md\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .md\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .md\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .md\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .md\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .md\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .md\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .md\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .md\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .md\:example {
     font-weight: 700;
     color: #ef4444;
@@ -104882,7 +106216,7 @@ video {
   }
 
   .lg\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -105139,6 +106473,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .lg\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .lg\:filter-none {
+    filter: none;
+  }
+
+  .lg\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .lg\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .lg\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .lg\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .lg\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .lg\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .lg\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .lg\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .lg\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .lg\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .lg\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .lg\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .lg\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .lg\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .lg\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .lg\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .lg\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .lg\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .lg\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .lg\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .lg\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .lg\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .lg\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .lg\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .lg\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .lg\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .lg\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .lg\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .lg\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .lg\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .lg\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .lg\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .lg\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .lg\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .lg\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .lg\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .lg\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .lg\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .lg\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .lg\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .lg\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .lg\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .lg\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .lg\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .lg\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .lg\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .lg\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .lg\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .lg\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .lg\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .lg\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .lg\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .lg\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .lg\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .lg\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .lg\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .lg\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .lg\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .lg\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .lg\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .lg\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .lg\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .lg\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .lg\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .lg\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .lg\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .lg\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .lg\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .lg\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .lg\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .lg\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .lg\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .lg\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .lg\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .lg\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .lg\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .lg\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .lg\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .lg\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .lg\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .lg\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .lg\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .lg\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .lg\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .lg\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .lg\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .lg\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .lg\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .lg\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .lg\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .lg\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .lg\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .lg\:example {
     font-weight: 700;
     color: #ef4444;
@@ -131023,7 +132771,7 @@ video {
   }
 
   .xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -131280,6 +133028,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .xl\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .xl\:filter-none {
+    filter: none;
+  }
+
+  .xl\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .xl\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .xl\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .xl\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .xl\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .xl\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .xl\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .xl\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .xl\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .xl\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .xl\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .xl\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .xl\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .xl\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .xl\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .xl\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .xl\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .xl\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .xl\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .xl\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .xl\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .xl\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .xl\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .xl\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .xl\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .xl\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .xl\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .xl\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .xl\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .xl\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .xl\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .xl\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .xl\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .xl\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .xl\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .xl\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .xl\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .xl\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .xl\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .xl\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .xl\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .xl\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .xl\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .xl\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .xl\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .xl\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .xl\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .xl\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .xl\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .xl\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .xl\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .xl\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .xl\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .xl\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .xl\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .xl\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .xl\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .xl\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .xl\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .xl\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .xl\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .xl\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .xl\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .xl\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .xl\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .xl\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .xl\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .xl\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .xl\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .xl\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .xl\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .xl\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .xl\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .xl\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .xl\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .xl\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .xl\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .xl\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .xl\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .xl\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .xl\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .xl\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .xl\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .xl\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .xl\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .xl\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .xl\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .xl\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .xl\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .xl\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .xl\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .xl\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .xl\:example {
     font-weight: 700;
     color: #ef4444;
@@ -157164,7 +159326,7 @@ video {
   }
 
   .\32xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -157421,6 +159583,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .\32xl\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .\32xl\:filter-none {
+    filter: none;
+  }
+
+  .\32xl\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .\32xl\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .\32xl\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .\32xl\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .\32xl\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .\32xl\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .\32xl\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .\32xl\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .\32xl\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .\32xl\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .\32xl\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .\32xl\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .\32xl\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .\32xl\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .\32xl\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .\32xl\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .\32xl\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .\32xl\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .\32xl\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .\32xl\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .\32xl\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .\32xl\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .\32xl\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .\32xl\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .\32xl\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .\32xl\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .\32xl\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .\32xl\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .\32xl\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .\32xl\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .\32xl\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .\32xl\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .\32xl\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .\32xl\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .\32xl\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .\32xl\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .\32xl\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .\32xl\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .\32xl\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .\32xl\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .\32xl\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .\32xl\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .\32xl\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .\32xl\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .\32xl\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .\32xl\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .\32xl\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .\32xl\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .\32xl\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .\32xl\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .\32xl\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .\32xl\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .\32xl\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .\32xl\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .\32xl\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .\32xl\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .\32xl\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .\32xl\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .\32xl\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .\32xl\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .\32xl\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .\32xl\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .\32xl\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .\32xl\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .\32xl\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .\32xl\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .\32xl\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .\32xl\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .\32xl\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .\32xl\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .\32xl\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .\32xl\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .\32xl\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .\32xl\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .\32xl\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .\32xl\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .\32xl\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .\32xl\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .\32xl\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .\32xl\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .\32xl\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .\32xl\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .\32xl\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .\32xl\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .\32xl\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .\32xl\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .\32xl\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .\32xl\:example {
     font-weight: 700;
     color: #ef4444;
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index f82cac248a3b..cba1a803d9ed 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -28985,7 +28985,7 @@ video {
 }
 
 .transition {
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -29273,6 +29273,512 @@ video {
   background-blend-mode: luminosity;
 }
 
+.filter {
+  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+  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);
+}
+
+.filter-none {
+  filter: none;
+}
+
+.blur-0 {
+  --tw-blur: blur(0);
+}
+
+.blur-sm {
+  --tw-blur: blur(4px);
+}
+
+.blur {
+  --tw-blur: blur(8px);
+}
+
+.blur-md {
+  --tw-blur: blur(12px);
+}
+
+.blur-lg {
+  --tw-blur: blur(16px);
+}
+
+.blur-xl {
+  --tw-blur: blur(24px);
+}
+
+.blur-2xl {
+  --tw-blur: blur(40px);
+}
+
+.blur-3xl {
+  --tw-blur: blur(64px);
+}
+
+.brightness-0 {
+  --tw-brightness: brightness(0);
+}
+
+.brightness-50 {
+  --tw-brightness: brightness(.5);
+}
+
+.brightness-75 {
+  --tw-brightness: brightness(.75);
+}
+
+.brightness-90 {
+  --tw-brightness: brightness(.9);
+}
+
+.brightness-95 {
+  --tw-brightness: brightness(.95);
+}
+
+.brightness-100 {
+  --tw-brightness: brightness(1);
+}
+
+.brightness-105 {
+  --tw-brightness: brightness(1.05);
+}
+
+.brightness-110 {
+  --tw-brightness: brightness(1.1);
+}
+
+.brightness-125 {
+  --tw-brightness: brightness(1.25);
+}
+
+.brightness-150 {
+  --tw-brightness: brightness(1.5);
+}
+
+.brightness-200 {
+  --tw-brightness: brightness(2);
+}
+
+.contrast-0 {
+  --tw-contrast: contrast(0);
+}
+
+.contrast-50 {
+  --tw-contrast: contrast(.5);
+}
+
+.contrast-75 {
+  --tw-contrast: contrast(.75);
+}
+
+.contrast-100 {
+  --tw-contrast: contrast(1);
+}
+
+.contrast-125 {
+  --tw-contrast: contrast(1.25);
+}
+
+.contrast-150 {
+  --tw-contrast: contrast(1.5);
+}
+
+.contrast-200 {
+  --tw-contrast: contrast(2);
+}
+
+.drop-shadow-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+}
+
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+}
+
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+}
+
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+}
+
+.drop-shadow-xl {
+  --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+}
+
+.drop-shadow-2xl {
+  --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+}
+
+.drop-shadow-none {
+  --tw-drop-shadow: drop-shadow(0 0 #0000);
+}
+
+.grayscale-0 {
+  --tw-grayscale: grayscale(0);
+}
+
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+}
+
+.hue-rotate-0 {
+  --tw-hue-rotate: hue-rotate(0deg);
+}
+
+.hue-rotate-15 {
+  --tw-hue-rotate: hue-rotate(15deg);
+}
+
+.hue-rotate-30 {
+  --tw-hue-rotate: hue-rotate(30deg);
+}
+
+.hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(60deg);
+}
+
+.hue-rotate-90 {
+  --tw-hue-rotate: hue-rotate(90deg);
+}
+
+.hue-rotate-180 {
+  --tw-hue-rotate: hue-rotate(180deg);
+}
+
+.-hue-rotate-180 {
+  --tw-hue-rotate: hue-rotate(-180deg);
+}
+
+.-hue-rotate-90 {
+  --tw-hue-rotate: hue-rotate(-90deg);
+}
+
+.-hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(-60deg);
+}
+
+.-hue-rotate-30 {
+  --tw-hue-rotate: hue-rotate(-30deg);
+}
+
+.-hue-rotate-15 {
+  --tw-hue-rotate: hue-rotate(-15deg);
+}
+
+.invert-0 {
+  --tw-invert: invert(0);
+}
+
+.invert {
+  --tw-invert: invert(100%);
+}
+
+.saturate-0 {
+  --tw-saturate: saturate(0);
+}
+
+.saturate-50 {
+  --tw-saturate: saturate(.5);
+}
+
+.saturate-100 {
+  --tw-saturate: saturate(1);
+}
+
+.saturate-150 {
+  --tw-saturate: saturate(1.5);
+}
+
+.saturate-200 {
+  --tw-saturate: saturate(2);
+}
+
+.sepia-0 {
+  --tw-sepia: sepia(0);
+}
+
+.sepia {
+  --tw-sepia: sepia(100%);
+}
+
+.backdrop-filter {
+  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+  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-none {
+  backdrop-filter: none;
+}
+
+.backdrop-blur-0 {
+  --tw-backdrop-blur: blur(0);
+}
+
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+}
+
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+}
+
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+}
+
+.backdrop-blur-lg {
+  --tw-backdrop-blur: blur(16px);
+}
+
+.backdrop-blur-xl {
+  --tw-backdrop-blur: blur(24px);
+}
+
+.backdrop-blur-2xl {
+  --tw-backdrop-blur: blur(40px);
+}
+
+.backdrop-blur-3xl {
+  --tw-backdrop-blur: blur(64px);
+}
+
+.backdrop-brightness-0 {
+  --tw-backdrop-brightness: brightness(0);
+}
+
+.backdrop-brightness-50 {
+  --tw-backdrop-brightness: brightness(.5);
+}
+
+.backdrop-brightness-75 {
+  --tw-backdrop-brightness: brightness(.75);
+}
+
+.backdrop-brightness-90 {
+  --tw-backdrop-brightness: brightness(.9);
+}
+
+.backdrop-brightness-95 {
+  --tw-backdrop-brightness: brightness(.95);
+}
+
+.backdrop-brightness-100 {
+  --tw-backdrop-brightness: brightness(1);
+}
+
+.backdrop-brightness-105 {
+  --tw-backdrop-brightness: brightness(1.05);
+}
+
+.backdrop-brightness-110 {
+  --tw-backdrop-brightness: brightness(1.1);
+}
+
+.backdrop-brightness-125 {
+  --tw-backdrop-brightness: brightness(1.25);
+}
+
+.backdrop-brightness-150 {
+  --tw-backdrop-brightness: brightness(1.5);
+}
+
+.backdrop-brightness-200 {
+  --tw-backdrop-brightness: brightness(2);
+}
+
+.backdrop-contrast-0 {
+  --tw-backdrop-contrast: contrast(0);
+}
+
+.backdrop-contrast-50 {
+  --tw-backdrop-contrast: contrast(.5);
+}
+
+.backdrop-contrast-75 {
+  --tw-backdrop-contrast: contrast(.75);
+}
+
+.backdrop-contrast-100 {
+  --tw-backdrop-contrast: contrast(1);
+}
+
+.backdrop-contrast-125 {
+  --tw-backdrop-contrast: contrast(1.25);
+}
+
+.backdrop-contrast-150 {
+  --tw-backdrop-contrast: contrast(1.5);
+}
+
+.backdrop-contrast-200 {
+  --tw-backdrop-contrast: contrast(2);
+}
+
+.backdrop-grayscale-0 {
+  --tw-backdrop-grayscale: grayscale(0);
+}
+
+.backdrop-grayscale {
+  --tw-backdrop-grayscale: grayscale(100%);
+}
+
+.backdrop-hue-rotate-0 {
+  --tw-backdrop-hue-rotate: hue-rotate(0deg);
+}
+
+.backdrop-hue-rotate-15 {
+  --tw-backdrop-hue-rotate: hue-rotate(15deg);
+}
+
+.backdrop-hue-rotate-30 {
+  --tw-backdrop-hue-rotate: hue-rotate(30deg);
+}
+
+.backdrop-hue-rotate-60 {
+  --tw-backdrop-hue-rotate: hue-rotate(60deg);
+}
+
+.backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(90deg);
+}
+
+.backdrop-hue-rotate-180 {
+  --tw-backdrop-hue-rotate: hue-rotate(180deg);
+}
+
+.-backdrop-hue-rotate-180 {
+  --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+}
+
+.-backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+}
+
+.-backdrop-hue-rotate-60 {
+  --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+}
+
+.-backdrop-hue-rotate-30 {
+  --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+}
+
+.-backdrop-hue-rotate-15 {
+  --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+}
+
+.backdrop-invert-0 {
+  --tw-backdrop-invert: invert(0);
+}
+
+.backdrop-invert {
+  --tw-backdrop-invert: invert(100%);
+}
+
+.backdrop-opacity-0 {
+  --tw-backdrop-opacity: opacity(0);
+}
+
+.backdrop-opacity-5 {
+  --tw-backdrop-opacity: opacity(0.05);
+}
+
+.backdrop-opacity-10 {
+  --tw-backdrop-opacity: opacity(0.1);
+}
+
+.backdrop-opacity-20 {
+  --tw-backdrop-opacity: opacity(0.2);
+}
+
+.backdrop-opacity-25 {
+  --tw-backdrop-opacity: opacity(0.25);
+}
+
+.backdrop-opacity-30 {
+  --tw-backdrop-opacity: opacity(0.3);
+}
+
+.backdrop-opacity-40 {
+  --tw-backdrop-opacity: opacity(0.4);
+}
+
+.backdrop-opacity-50 {
+  --tw-backdrop-opacity: opacity(0.5);
+}
+
+.backdrop-opacity-60 {
+  --tw-backdrop-opacity: opacity(0.6);
+}
+
+.backdrop-opacity-70 {
+  --tw-backdrop-opacity: opacity(0.7);
+}
+
+.backdrop-opacity-75 {
+  --tw-backdrop-opacity: opacity(0.75);
+}
+
+.backdrop-opacity-80 {
+  --tw-backdrop-opacity: opacity(0.8);
+}
+
+.backdrop-opacity-90 {
+  --tw-backdrop-opacity: opacity(0.9);
+}
+
+.backdrop-opacity-95 {
+  --tw-backdrop-opacity: opacity(0.95);
+}
+
+.backdrop-opacity-100 {
+  --tw-backdrop-opacity: opacity(1);
+}
+
+.backdrop-saturate-0 {
+  --tw-backdrop-saturate: saturate(0);
+}
+
+.backdrop-saturate-50 {
+  --tw-backdrop-saturate: saturate(.5);
+}
+
+.backdrop-saturate-100 {
+  --tw-backdrop-saturate: saturate(1);
+}
+
+.backdrop-saturate-150 {
+  --tw-backdrop-saturate: saturate(1.5);
+}
+
+.backdrop-saturate-200 {
+  --tw-backdrop-saturate: saturate(2);
+}
+
+.backdrop-sepia-0 {
+  --tw-backdrop-sepia: sepia(0);
+}
+
+.backdrop-sepia {
+  --tw-backdrop-sepia: sepia(100%);
+}
+
 .example {
   font-weight: 700;
   color: #ef4444;
@@ -57712,7 +58218,7 @@ video {
   }
 
   .sm\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -57969,6 +58475,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .sm\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .sm\:filter-none {
+    filter: none;
+  }
+
+  .sm\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .sm\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .sm\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .sm\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .sm\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .sm\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .sm\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .sm\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .sm\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .sm\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .sm\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .sm\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .sm\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .sm\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .sm\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .sm\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .sm\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .sm\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .sm\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .sm\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .sm\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .sm\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .sm\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .sm\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .sm\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .sm\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .sm\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .sm\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .sm\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .sm\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .sm\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .sm\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .sm\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .sm\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .sm\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .sm\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .sm\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .sm\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .sm\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .sm\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .sm\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .sm\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .sm\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .sm\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .sm\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .sm\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .sm\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .sm\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .sm\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .sm\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .sm\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .sm\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .sm\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .sm\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .sm\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .sm\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .sm\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .sm\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .sm\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .sm\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .sm\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .sm\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .sm\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .sm\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .sm\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .sm\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .sm\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .sm\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .sm\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .sm\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .sm\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .sm\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .sm\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .sm\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .sm\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .sm\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .sm\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .sm\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .sm\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .sm\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .sm\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .sm\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .sm\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .sm\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .sm\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .sm\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .sm\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .sm\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .sm\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .sm\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .sm\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .sm\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .sm\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .sm\:example {
     font-weight: 700;
     color: #ef4444;
@@ -86409,7 +87329,7 @@ video {
   }
 
   .md\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -86666,6 +87586,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .md\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .md\:filter-none {
+    filter: none;
+  }
+
+  .md\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .md\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .md\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .md\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .md\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .md\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .md\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .md\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .md\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .md\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .md\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .md\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .md\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .md\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .md\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .md\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .md\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .md\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .md\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .md\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .md\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .md\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .md\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .md\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .md\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .md\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .md\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .md\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .md\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .md\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .md\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .md\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .md\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .md\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .md\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .md\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .md\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .md\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .md\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .md\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .md\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .md\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .md\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .md\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .md\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .md\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .md\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .md\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .md\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .md\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .md\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .md\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .md\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .md\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .md\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .md\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .md\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .md\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .md\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .md\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .md\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .md\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .md\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .md\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .md\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .md\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .md\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .md\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .md\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .md\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .md\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .md\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .md\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .md\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .md\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .md\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .md\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .md\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .md\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .md\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .md\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .md\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .md\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .md\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .md\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .md\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .md\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .md\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .md\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .md\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .md\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .md\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .md\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .md\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .md\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .md\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .md\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .md\:example {
     font-weight: 700;
     color: #ef4444;
@@ -115106,7 +116440,7 @@ video {
   }
 
   .lg\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -115363,6 +116697,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .lg\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .lg\:filter-none {
+    filter: none;
+  }
+
+  .lg\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .lg\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .lg\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .lg\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .lg\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .lg\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .lg\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .lg\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .lg\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .lg\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .lg\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .lg\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .lg\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .lg\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .lg\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .lg\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .lg\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .lg\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .lg\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .lg\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .lg\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .lg\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .lg\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .lg\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .lg\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .lg\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .lg\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .lg\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .lg\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .lg\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .lg\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .lg\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .lg\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .lg\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .lg\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .lg\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .lg\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .lg\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .lg\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .lg\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .lg\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .lg\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .lg\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .lg\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .lg\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .lg\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .lg\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .lg\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .lg\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .lg\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .lg\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .lg\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .lg\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .lg\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .lg\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .lg\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .lg\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .lg\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .lg\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .lg\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .lg\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .lg\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .lg\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .lg\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .lg\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .lg\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .lg\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .lg\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .lg\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .lg\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .lg\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .lg\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .lg\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .lg\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .lg\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .lg\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .lg\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .lg\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .lg\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .lg\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .lg\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .lg\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .lg\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .lg\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .lg\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .lg\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .lg\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .lg\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .lg\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .lg\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .lg\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .lg\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .lg\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .lg\:example {
     font-weight: 700;
     color: #ef4444;
@@ -143803,7 +145551,7 @@ video {
   }
 
   .xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -144060,6 +145808,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .xl\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .xl\:filter-none {
+    filter: none;
+  }
+
+  .xl\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .xl\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .xl\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .xl\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .xl\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .xl\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .xl\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .xl\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .xl\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .xl\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .xl\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .xl\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .xl\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .xl\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .xl\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .xl\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .xl\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .xl\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .xl\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .xl\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .xl\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .xl\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .xl\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .xl\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .xl\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .xl\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .xl\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .xl\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .xl\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .xl\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .xl\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .xl\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .xl\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .xl\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .xl\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .xl\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .xl\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .xl\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .xl\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .xl\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .xl\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .xl\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .xl\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .xl\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .xl\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .xl\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .xl\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .xl\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .xl\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .xl\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .xl\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .xl\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .xl\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .xl\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .xl\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .xl\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .xl\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .xl\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .xl\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .xl\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .xl\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .xl\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .xl\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .xl\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .xl\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .xl\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .xl\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .xl\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .xl\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .xl\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .xl\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .xl\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .xl\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .xl\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .xl\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .xl\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .xl\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .xl\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .xl\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .xl\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .xl\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .xl\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .xl\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .xl\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .xl\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .xl\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .xl\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .xl\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .xl\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .xl\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .xl\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .xl\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .xl\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .xl\:example {
     font-weight: 700;
     color: #ef4444;
@@ -172500,7 +174662,7 @@ video {
   }
 
   .\32xl\:transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -172757,6 +174919,420 @@ video {
     background-blend-mode: luminosity;
   }
 
+  .\32xl\:filter {
+    --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+    --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .\32xl\:filter-none {
+    filter: none;
+  }
+
+  .\32xl\:blur-0 {
+    --tw-blur: blur(0);
+  }
+
+  .\32xl\:blur-sm {
+    --tw-blur: blur(4px);
+  }
+
+  .\32xl\:blur {
+    --tw-blur: blur(8px);
+  }
+
+  .\32xl\:blur-md {
+    --tw-blur: blur(12px);
+  }
+
+  .\32xl\:blur-lg {
+    --tw-blur: blur(16px);
+  }
+
+  .\32xl\:blur-xl {
+    --tw-blur: blur(24px);
+  }
+
+  .\32xl\:blur-2xl {
+    --tw-blur: blur(40px);
+  }
+
+  .\32xl\:blur-3xl {
+    --tw-blur: blur(64px);
+  }
+
+  .\32xl\:brightness-0 {
+    --tw-brightness: brightness(0);
+  }
+
+  .\32xl\:brightness-50 {
+    --tw-brightness: brightness(.5);
+  }
+
+  .\32xl\:brightness-75 {
+    --tw-brightness: brightness(.75);
+  }
+
+  .\32xl\:brightness-90 {
+    --tw-brightness: brightness(.9);
+  }
+
+  .\32xl\:brightness-95 {
+    --tw-brightness: brightness(.95);
+  }
+
+  .\32xl\:brightness-100 {
+    --tw-brightness: brightness(1);
+  }
+
+  .\32xl\:brightness-105 {
+    --tw-brightness: brightness(1.05);
+  }
+
+  .\32xl\:brightness-110 {
+    --tw-brightness: brightness(1.1);
+  }
+
+  .\32xl\:brightness-125 {
+    --tw-brightness: brightness(1.25);
+  }
+
+  .\32xl\:brightness-150 {
+    --tw-brightness: brightness(1.5);
+  }
+
+  .\32xl\:brightness-200 {
+    --tw-brightness: brightness(2);
+  }
+
+  .\32xl\:contrast-0 {
+    --tw-contrast: contrast(0);
+  }
+
+  .\32xl\:contrast-50 {
+    --tw-contrast: contrast(.5);
+  }
+
+  .\32xl\:contrast-75 {
+    --tw-contrast: contrast(.75);
+  }
+
+  .\32xl\:contrast-100 {
+    --tw-contrast: contrast(1);
+  }
+
+  .\32xl\:contrast-125 {
+    --tw-contrast: contrast(1.25);
+  }
+
+  .\32xl\:contrast-150 {
+    --tw-contrast: contrast(1.5);
+  }
+
+  .\32xl\:contrast-200 {
+    --tw-contrast: contrast(2);
+  }
+
+  .\32xl\:drop-shadow-sm {
+    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
+  }
+
+  .\32xl\:drop-shadow {
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+  }
+
+  .\32xl\:drop-shadow-md {
+    --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  }
+
+  .\32xl\:drop-shadow-lg {
+    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+  }
+
+  .\32xl\:drop-shadow-xl {
+    --tw-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+  }
+
+  .\32xl\:drop-shadow-2xl {
+    --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+  }
+
+  .\32xl\:drop-shadow-none {
+    --tw-drop-shadow: drop-shadow(0 0 #0000);
+  }
+
+  .\32xl\:grayscale-0 {
+    --tw-grayscale: grayscale(0);
+  }
+
+  .\32xl\:grayscale {
+    --tw-grayscale: grayscale(100%);
+  }
+
+  .\32xl\:hue-rotate-0 {
+    --tw-hue-rotate: hue-rotate(0deg);
+  }
+
+  .\32xl\:hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(15deg);
+  }
+
+  .\32xl\:hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(30deg);
+  }
+
+  .\32xl\:hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(60deg);
+  }
+
+  .\32xl\:hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(90deg);
+  }
+
+  .\32xl\:hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(180deg);
+  }
+
+  .\32xl\:-hue-rotate-180 {
+    --tw-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .\32xl\:-hue-rotate-90 {
+    --tw-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .\32xl\:-hue-rotate-60 {
+    --tw-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .\32xl\:-hue-rotate-30 {
+    --tw-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .\32xl\:-hue-rotate-15 {
+    --tw-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .\32xl\:invert-0 {
+    --tw-invert: invert(0);
+  }
+
+  .\32xl\:invert {
+    --tw-invert: invert(100%);
+  }
+
+  .\32xl\:saturate-0 {
+    --tw-saturate: saturate(0);
+  }
+
+  .\32xl\:saturate-50 {
+    --tw-saturate: saturate(.5);
+  }
+
+  .\32xl\:saturate-100 {
+    --tw-saturate: saturate(1);
+  }
+
+  .\32xl\:saturate-150 {
+    --tw-saturate: saturate(1.5);
+  }
+
+  .\32xl\:saturate-200 {
+    --tw-saturate: saturate(2);
+  }
+
+  .\32xl\:sepia-0 {
+    --tw-sepia: sepia(0);
+  }
+
+  .\32xl\:sepia {
+    --tw-sepia: sepia(100%);
+  }
+
+  .\32xl\:backdrop-filter {
+    --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+    --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+    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);
+  }
+
+  .\32xl\:backdrop-filter-none {
+    backdrop-filter: none;
+  }
+
+  .\32xl\:backdrop-brightness-0 {
+    --tw-backdrop-brightness: brightness(0);
+  }
+
+  .\32xl\:backdrop-brightness-50 {
+    --tw-backdrop-brightness: brightness(.5);
+  }
+
+  .\32xl\:backdrop-brightness-75 {
+    --tw-backdrop-brightness: brightness(.75);
+  }
+
+  .\32xl\:backdrop-brightness-90 {
+    --tw-backdrop-brightness: brightness(.9);
+  }
+
+  .\32xl\:backdrop-brightness-95 {
+    --tw-backdrop-brightness: brightness(.95);
+  }
+
+  .\32xl\:backdrop-brightness-100 {
+    --tw-backdrop-brightness: brightness(1);
+  }
+
+  .\32xl\:backdrop-brightness-105 {
+    --tw-backdrop-brightness: brightness(1.05);
+  }
+
+  .\32xl\:backdrop-brightness-110 {
+    --tw-backdrop-brightness: brightness(1.1);
+  }
+
+  .\32xl\:backdrop-brightness-125 {
+    --tw-backdrop-brightness: brightness(1.25);
+  }
+
+  .\32xl\:backdrop-brightness-150 {
+    --tw-backdrop-brightness: brightness(1.5);
+  }
+
+  .\32xl\:backdrop-brightness-200 {
+    --tw-backdrop-brightness: brightness(2);
+  }
+
+  .\32xl\:backdrop-contrast-0 {
+    --tw-backdrop-contrast: contrast(0);
+  }
+
+  .\32xl\:backdrop-contrast-50 {
+    --tw-backdrop-contrast: contrast(.5);
+  }
+
+  .\32xl\:backdrop-contrast-75 {
+    --tw-backdrop-contrast: contrast(.75);
+  }
+
+  .\32xl\:backdrop-contrast-100 {
+    --tw-backdrop-contrast: contrast(1);
+  }
+
+  .\32xl\:backdrop-contrast-125 {
+    --tw-backdrop-contrast: contrast(1.25);
+  }
+
+  .\32xl\:backdrop-contrast-150 {
+    --tw-backdrop-contrast: contrast(1.5);
+  }
+
+  .\32xl\:backdrop-contrast-200 {
+    --tw-backdrop-contrast: contrast(2);
+  }
+
+  .\32xl\:backdrop-grayscale-0 {
+    --tw-backdrop-grayscale: grayscale(0);
+  }
+
+  .\32xl\:backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+  }
+
+  .\32xl\:backdrop-hue-rotate-0 {
+    --tw-backdrop-hue-rotate: hue-rotate(0deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(15deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(30deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(60deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  }
+
+  .\32xl\:backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(180deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-180 {
+    --tw-backdrop-hue-rotate: hue-rotate(-180deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-90 {
+    --tw-backdrop-hue-rotate: hue-rotate(-90deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-60 {
+    --tw-backdrop-hue-rotate: hue-rotate(-60deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-30 {
+    --tw-backdrop-hue-rotate: hue-rotate(-30deg);
+  }
+
+  .\32xl\:-backdrop-hue-rotate-15 {
+    --tw-backdrop-hue-rotate: hue-rotate(-15deg);
+  }
+
+  .\32xl\:backdrop-invert-0 {
+    --tw-backdrop-invert: invert(0);
+  }
+
+  .\32xl\:backdrop-invert {
+    --tw-backdrop-invert: invert(100%);
+  }
+
+  .\32xl\:backdrop-saturate-0 {
+    --tw-backdrop-saturate: saturate(0);
+  }
+
+  .\32xl\:backdrop-saturate-50 {
+    --tw-backdrop-saturate: saturate(.5);
+  }
+
+  .\32xl\:backdrop-saturate-100 {
+    --tw-backdrop-saturate: saturate(1);
+  }
+
+  .\32xl\:backdrop-saturate-150 {
+    --tw-backdrop-saturate: saturate(1.5);
+  }
+
+  .\32xl\:backdrop-saturate-200 {
+    --tw-backdrop-saturate: saturate(2);
+  }
+
+  .\32xl\:backdrop-sepia-0 {
+    --tw-backdrop-sepia: sepia(0);
+  }
+
+  .\32xl\:backdrop-sepia {
+    --tw-backdrop-sepia: sepia(100%);
+  }
+
   .\32xl\:example {
     font-weight: 700;
     color: #ef4444;
diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js
index bf42e58cbb93..63a24da91246 100644
--- a/jit/corePlugins/index.js
+++ b/jit/corePlugins/index.js
@@ -292,6 +292,28 @@ module.exports = {
   ringOffsetWidth: require('./ringOffsetWidth'),
   ringOffsetColor: require('./ringOffsetColor'),
 
+  filter: require('../../lib/plugins/filter').default(),
+  blur: require('../../lib/plugins/blur').default(),
+  brightness: require('../../lib/plugins/brightness').default(),
+  contrast: require('../../lib/plugins/contrast').default(),
+  dropShadow: require('../../lib/plugins/dropShadow').default(),
+  grayscale: require('../../lib/plugins/grayscale').default(),
+  hueRotate: require('../../lib/plugins/hueRotate').default(),
+  invert: require('../../lib/plugins/invert').default(),
+  saturate: require('../../lib/plugins/saturate').default(),
+  sepia: require('../../lib/plugins/sepia').default(),
+
+  backdropFilter: require('../../lib/plugins/backdropFilter').default(),
+  backdropBlur: require('../../lib/plugins/backdropBlur').default(),
+  backdropBrightness: require('../../lib/plugins/backdropBrightness').default(),
+  backdropContrast: require('../../lib/plugins/backdropContrast').default(),
+  backdropGrayscale: require('../../lib/plugins/backdropGrayscale').default(),
+  backdropHueRotate: require('../../lib/plugins/backdropHueRotate').default(),
+  backdropInvert: require('../../lib/plugins/backdropInvert').default(),
+  backdropOpacity: require('../../lib/plugins/backdropOpacity').default(),
+  backdropSaturate: require('../../lib/plugins/backdropSaturate').default(),
+  backdropSepia: require('../../lib/plugins/backdropSepia').default(),
+
   transitionProperty: require('./transitionProperty'),
   transitionDelay: require('./transitionDelay'),
   transitionDuration: require('./transitionDuration'),
diff --git a/jit/tests/arbitrary-values.test.css b/jit/tests/arbitrary-values.test.css
index fe9ffd5605de..511985d276b2 100644
--- a/jit/tests/arbitrary-values.test.css
+++ b/jit/tests/arbitrary-values.test.css
@@ -136,6 +136,57 @@
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }
+.blur-\[15px\] {
+  --tw-blur: blur(15px);
+}
+.brightness-\[300\%\] {
+  --tw-brightness: brightness(300%);
+}
+.contrast-\[2\.4\] {
+  --tw-contrast: contrast(2.4);
+}
+.grayscale-\[0\.55\] {
+  --tw-grayscale: grayscale(0.55);
+}
+.hue-rotate-\[0\.8turn\] {
+  --tw-hue-rotate: hue-rotate(0.8turn);
+}
+.invert-\[0\.75\] {
+  --tw-invert: invert(0.75);
+}
+.saturate-\[180\%\] {
+  --tw-saturate: saturate(180%);
+}
+.sepia-\[0\.2\] {
+  --tw-sepia: sepia(0.2);
+}
+.backdrop-blur-\[11px\] {
+  --tw-backdrop-blur: blur(11px);
+}
+.backdrop-brightness-\[1\.23\] {
+  --tw-backdrop-brightness: brightness(1.23);
+}
+.backdrop-contrast-\[0\.87\] {
+  --tw-backdrop-contrast: contrast(0.87);
+}
+.backdrop-grayscale-\[0\.42\] {
+  --tw-backdrop-grayscale: grayscale(0.42);
+}
+.backdrop-hue-rotate-\[1\.57rad\] {
+  --tw-backdrop-hue-rotate: hue-rotate(1.57rad);
+}
+.backdrop-invert-\[0\.66\] {
+  --tw-backdrop-invert: invert(0.66);
+}
+.backdrop-opacity-\[22\%\] {
+  --tw-backdrop-opacity: opacity(22%);
+}
+.backdrop-saturate-\[144\%\] {
+  --tw-backdrop-saturate: saturate(144%);
+}
+.backdrop-sepia-\[0\.38\] {
+  --tw-backdrop-sepia: sepia(0.38);
+}
 .duration-\[2s\] {
   transition-duration: 2s;
 }
diff --git a/jit/tests/arbitrary-values.test.html b/jit/tests/arbitrary-values.test.html
index 315d533d61d2..6a93e80c974a 100644
--- a/jit/tests/arbitrary-values.test.html
+++ b/jit/tests/arbitrary-values.test.html
@@ -43,5 +43,22 @@
     <div class="duration-[var(--app-duration)]"></div>
     <div class="p-[var(--app-padding)]"></div>
     <div class="inset-[11px]"></div>
+    <div class="blur-[15px]"></div>
+    <div class="brightness-[300%]"></div>
+    <div class="contrast-[2.4]"></div>
+    <div class="grayscale-[0.55]"></div>
+    <div class="hue-rotate-[0.8turn]"></div>
+    <div class="invert-[0.75]"></div>
+    <div class="saturate-[180%]"></div>
+    <div class="sepia-[0.2]"></div>
+    <div class="backdrop-blur-[11px]"></div>
+    <div class="backdrop-brightness-[1.23]"></div>
+    <div class="backdrop-contrast-[0.87]"></div>
+    <div class="backdrop-grayscale-[0.42]"></div>
+    <div class="backdrop-hue-rotate-[1.57rad]"></div>
+    <div class="backdrop-invert-[0.66]"></div>
+    <div class="backdrop-opacity-[22%]"></div>
+    <div class="backdrop-saturate-[144%]"></div>
+    <div class="backdrop-sepia-[0.38]"></div>
   </body>
 </html>
diff --git a/jit/tests/arbitrary-values.test.js b/jit/tests/arbitrary-values.test.js
index bb3da9c65529..ad5683ce3c33 100644
--- a/jit/tests/arbitrary-values.test.js
+++ b/jit/tests/arbitrary-values.test.js
@@ -9,6 +9,7 @@ function run(input, config = {}) {
 
 test('arbitrary values', () => {
   let config = {
+    mode: 'jit',
     purge: [path.resolve(__dirname, './arbitrary-values.test.html')],
     corePlugins: { preflight: false },
     theme: {},
diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css
index 55290da147d3..e8cb3121d2fb 100644
--- a/jit/tests/basic-usage.test.css
+++ b/jit/tests/basic-usage.test.css
@@ -633,9 +633,97 @@
 .ring-offset-blue-300 {
   --tw-ring-offset-color: #93c5fd;
 }
+.filter {
+  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
+  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
+  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
+  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
+  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
+  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
+  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
+  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
+  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
+  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);
+}
+.filter-none {
+  filter: none;
+}
+.blur-md {
+  --tw-blur: blur(12px);
+}
+.brightness-150 {
+  --tw-brightness: brightness(1.5);
+}
+.contrast-50 {
+  --tw-contrast: contrast(0.5);
+}
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
+    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+}
+.grayscale {
+  --tw-grayscale: grayscale(100%);
+}
+.hue-rotate-60 {
+  --tw-hue-rotate: hue-rotate(60deg);
+}
+.invert {
+  --tw-invert: invert(100%);
+}
+.saturate-200 {
+  --tw-saturate: saturate(2);
+}
+.sepia {
+  --tw-sepia: sepia(100%);
+}
+.backdrop-filter {
+  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
+  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
+  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
+  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
+  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
+  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
+  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
+  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
+  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
+  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-none {
+  backdrop-filter: none;
+}
+.backdrop-blur-lg {
+  --tw-backdrop-blur: blur(16px);
+}
+.backdrop-brightness-50 {
+  --tw-backdrop-brightness: brightness(0.5);
+}
+.backdrop-contrast-0 {
+  --tw-backdrop-contrast: contrast(0);
+}
+.backdrop-grayscale {
+  --tw-backdrop-grayscale: grayscale(100%);
+}
+.backdrop-hue-rotate-90 {
+  --tw-backdrop-hue-rotate: hue-rotate(90deg);
+}
+.backdrop-invert {
+  --tw-backdrop-invert: invert(100%);
+}
+.backdrop-opacity-75 {
+  --tw-backdrop-opacity: opacity(0.75);
+}
+.backdrop-saturate-150 {
+  --tw-backdrop-saturate: saturate(1.5);
+}
+.backdrop-sepia {
+  --tw-backdrop-sepia: sepia(100%);
+}
 .transition {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
-    transform;
+    transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html
index 3ae49117afd7..f0fea67aad08 100644
--- a/jit/tests/basic-usage.test.html
+++ b/jit/tests/basic-usage.test.html
@@ -108,6 +108,12 @@
     <div class="ring-offset-2"></div>
     <div class="ring-opacity-40"></div>
     <div class="ring ring-4"></div>
+    <div
+      class="filter filter-none blur-md brightness-150 contrast-50 drop-shadow-md grayscale hue-rotate-60 invert saturate-200 sepia"
+    ></div>
+    <div
+      class="backdrop-filter backdrop-filter-none backdrop-blur-lg backdrop-brightness-50 backdrop-contrast-0 backdrop-grayscale backdrop-hue-rotate-90 backdrop-invert backdrop-opacity-75 backdrop-saturate-150 backdrop-sepia"
+    ></div>
     <div class="rotate-3"></div>
     <div class="scale-95"></div>
     <div class="skew-y-12 skew-x-12"></div>
diff --git a/jit/tests/kitchen-sink.test.css b/jit/tests/kitchen-sink.test.css
index 75f94f5886d9..5c009ee38611 100644
--- a/jit/tests/kitchen-sink.test.css
+++ b/jit/tests/kitchen-sink.test.css
@@ -314,11 +314,11 @@ div {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.filter-none {
-  filter: none;
+.magic-none {
+  magic: none;
 }
-.filter-grayscale {
-  filter: grayscale(100%);
+.magic-tons {
+  magic: tons;
 }
 .custom-util {
   background: #abcdef;
@@ -410,7 +410,7 @@ div {
 @media (prefers-reduced-motion: no-preference) {
   .motion-safe\:transition {
     transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
-      transform;
+      transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -421,7 +421,7 @@ div {
 @media (prefers-reduced-motion: reduce) {
   .motion-reduce\:transition {
     transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
-      transform;
+      transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
   }
@@ -535,7 +535,7 @@ div {
   @media (prefers-reduced-motion: no-preference) {
     .md\:motion-safe\:hover\:transition:hover {
       transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
-        transform;
+        transform, filter, backdrop-filter;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-duration: 150ms;
     }
diff --git a/jit/tests/kitchen-sink.test.html b/jit/tests/kitchen-sink.test.html
index 6f9d88e943cb..13254bece80b 100644
--- a/jit/tests/kitchen-sink.test.html
+++ b/jit/tests/kitchen-sink.test.html
@@ -27,7 +27,7 @@
     <div class="md:dark:motion-safe:foo:active:custom-util"></div>
     <div class="aspect-w-1 aspect-h-2"></div>
     <div class="aspect-w-3 aspect-h-4"></div>
-    <div class="filter-none filter-grayscale"></div>
+    <div class="magic-none magic-tons"></div>
     <div class="focus:font-normal"></div>
     <div class="font-medium"></div>
     <div class="bg-gradient-to-r from-foo"></div>
diff --git a/jit/tests/kitchen-sink.test.js b/jit/tests/kitchen-sink.test.js
index 2c971a743e6c..ae907ec87b69 100644
--- a/jit/tests/kitchen-sink.test.js
+++ b/jit/tests/kitchen-sink.test.js
@@ -55,11 +55,11 @@ test('it works', () => {
         })
         addUtilities(
           {
-            '.filter-none': {
-              filter: 'none',
+            '.magic-none': {
+              magic: 'none',
             },
-            '.filter-grayscale': {
-              filter: 'grayscale(100%)',
+            '.magic-tons': {
+              magic: 'tons',
             },
           },
           ['responsive', 'hover']
diff --git a/src/corePluginList.js b/src/corePluginList.js
index 9f6538d40d70..67ebc8376818 100644
--- a/src/corePluginList.js
+++ b/src/corePluginList.js
@@ -122,4 +122,24 @@ export const corePluginList = [
   'animation',
   'mixBlendMode',
   'backgroundBlendMode',
+  'filter',
+  'blur',
+  'brightness',
+  'contrast',
+  'dropShadow',
+  'grayscale',
+  'hueRotate',
+  'invert',
+  'saturate',
+  'sepia',
+  'backdropFilter',
+  'backdropBlur',
+  'backdropBrightness',
+  'backdropContrast',
+  'backdropGrayscale',
+  'backdropHueRotate',
+  'backdropInvert',
+  'backdropOpacity',
+  'backdropSaturate',
+  'backdropSepia',
 ]
diff --git a/src/plugins/backdropBlur.js b/src/plugins/backdropBlur.js
new file mode 100644
index 000000000000..8872a9d3d292
--- /dev/null
+++ b/src/plugins/backdropBlur.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-blur': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropBlur)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-blur', modifier)]: { '--tw-backdrop-blur': `blur(${value})` },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropBlur'), (value, modifier) => {
+          return [
+            nameClass('backdrop-blur', modifier),
+            {
+              '--tw-backdrop-blur': Array.isArray(value)
+                ? value.map((v) => `blur(${v})`).join(' ')
+                : `blur(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdopBlur'))
+    }
+  }
+}
diff --git a/src/plugins/backdropBrightness.js b/src/plugins/backdropBrightness.js
new file mode 100644
index 000000000000..e7e4cc792b91
--- /dev/null
+++ b/src/plugins/backdropBrightness.js
@@ -0,0 +1,39 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-brightness': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropBrightness)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-brightness', modifier)]: {
+              '--tw-backdrop-brightness': `brightness(${value})`,
+            },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropBrightness'), (value, modifier) => {
+          return [
+            nameClass('backdrop-brightness', modifier),
+            {
+              '--tw-backdrop-brightness': Array.isArray(value)
+                ? value.map((v) => `brightness(${v})`).join(' ')
+                : `brightness(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdropBrightness'))
+    }
+  }
+}
diff --git a/src/plugins/backdropContrast.js b/src/plugins/backdropContrast.js
new file mode 100644
index 000000000000..5eeb0cf0321e
--- /dev/null
+++ b/src/plugins/backdropContrast.js
@@ -0,0 +1,39 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-contrast': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropContrast)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-contrast', modifier)]: {
+              '--tw-backdrop-contrast': `contrast(${value})`,
+            },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropContrast'), (value, modifier) => {
+          return [
+            nameClass('backdrop-contrast', modifier),
+            {
+              '--tw-backdrop-contrast': Array.isArray(value)
+                ? value.map((v) => `contrast(${v})`).join(' ')
+                : `contrast(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdropContrast'))
+    }
+  }
+}
diff --git a/src/plugins/backdropFilter.js b/src/plugins/backdropFilter.js
new file mode 100644
index 000000000000..702e9f7e52f1
--- /dev/null
+++ b/src/plugins/backdropFilter.js
@@ -0,0 +1,32 @@
+export default function () {
+  return function ({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.backdrop-filter': {
+          '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+          '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)',
+          ].join(' '),
+        },
+        '.backdrop-filter-none': { 'backdrop-filter': 'none' },
+      },
+      variants('backdropFilter')
+    )
+  }
+}
diff --git a/src/plugins/backdropGrayscale.js b/src/plugins/backdropGrayscale.js
new file mode 100644
index 000000000000..6efa696ba956
--- /dev/null
+++ b/src/plugins/backdropGrayscale.js
@@ -0,0 +1,39 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-grayscale': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropGrayscale)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-grayscale', modifier)]: {
+              '--tw-backdrop-grayscale': `grayscale(${value})`,
+            },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropGrayscale'), (value, modifier) => {
+          return [
+            nameClass('backdrop-grayscale', modifier),
+            {
+              '--tw-backdrop-grayscale': Array.isArray(value)
+                ? value.map((v) => `grayscale(${v})`).join(' ')
+                : `grayscale(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdropGrayscale'))
+    }
+  }
+}
diff --git a/src/plugins/backdropHueRotate.js b/src/plugins/backdropHueRotate.js
new file mode 100644
index 000000000000..31cedb700c2a
--- /dev/null
+++ b/src/plugins/backdropHueRotate.js
@@ -0,0 +1,39 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-hue-rotate': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropHueRotate)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-hue-rotate', modifier)]: {
+              '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
+            },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropHueRotate'), (value, modifier) => {
+          return [
+            nameClass('backdrop-hue-rotate', modifier),
+            {
+              '--tw-backdrop-hue-rotate': Array.isArray(value)
+                ? value.map((v) => `hue-rotate(${v})`).join(' ')
+                : `hue-rotate(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdropHueRotate'))
+    }
+  }
+}
diff --git a/src/plugins/backdropInvert.js b/src/plugins/backdropInvert.js
new file mode 100644
index 000000000000..2055216a39b0
--- /dev/null
+++ b/src/plugins/backdropInvert.js
@@ -0,0 +1,39 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-invert': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropInvert)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-invert', modifier)]: {
+              '--tw-backdrop-invert': `invert(${value})`,
+            },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropInvert'), (value, modifier) => {
+          return [
+            nameClass('backdrop-invert', modifier),
+            {
+              '--tw-backdrop-invert': Array.isArray(value)
+                ? value.map((v) => `invert(${v})`).join(' ')
+                : `invert(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdropInvert'))
+    }
+  }
+}
diff --git a/src/plugins/backdropOpacity.js b/src/plugins/backdropOpacity.js
new file mode 100644
index 000000000000..0abdfaba6cc3
--- /dev/null
+++ b/src/plugins/backdropOpacity.js
@@ -0,0 +1,39 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-opacity': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropOpacity)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-opacity', modifier)]: {
+              '--tw-backdrop-opacity': `opacity(${value})`,
+            },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropOpacity'), (value, modifier) => {
+          return [
+            nameClass('backdrop-opacity', modifier),
+            {
+              '--tw-backdrop-opacity': Array.isArray(value)
+                ? value.map((v) => `opacity(${v})`).join(' ')
+                : `opacity(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdropOpacity'))
+    }
+  }
+}
diff --git a/src/plugins/backdropSaturate.js b/src/plugins/backdropSaturate.js
new file mode 100644
index 000000000000..2f124f55d8fa
--- /dev/null
+++ b/src/plugins/backdropSaturate.js
@@ -0,0 +1,39 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-saturate': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropSaturate)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-saturate', modifier)]: {
+              '--tw-backdrop-saturate': `saturate(${value})`,
+            },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropSaturate'), (value, modifier) => {
+          return [
+            nameClass('backdrop-saturate', modifier),
+            {
+              '--tw-backdrop-saturate': Array.isArray(value)
+                ? value.map((v) => `saturate(${v})`).join(' ')
+                : `saturate(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdropSaturate'))
+    }
+  }
+}
diff --git a/src/plugins/backdropSepia.js b/src/plugins/backdropSepia.js
new file mode 100644
index 000000000000..a1282365c3a4
--- /dev/null
+++ b/src/plugins/backdropSepia.js
@@ -0,0 +1,39 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'backdrop-sepia': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.backdropSepia)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('backdrop-sepia', modifier)]: {
+              '--tw-backdrop-sepia': `sepia(${value})`,
+            },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('backdropSepia'), (value, modifier) => {
+          return [
+            nameClass('backdrop-sepia', modifier),
+            {
+              '--tw-backdrop-sepia': Array.isArray(value)
+                ? value.map((v) => `sepia(${v})`).join(' ')
+                : `sepia(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('backdropSepia'))
+    }
+  }
+}
diff --git a/src/plugins/blur.js b/src/plugins/blur.js
new file mode 100644
index 000000000000..4b293ae1d799
--- /dev/null
+++ b/src/plugins/blur.js
@@ -0,0 +1,35 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        blur: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.blur)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return { [nameClass('blur', modifier)]: { '--tw-blur': `blur(${value})` } }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('blur'), (value, modifier) => {
+          return [
+            nameClass('blur', modifier),
+            {
+              '--tw-blur': Array.isArray(value)
+                ? value.map((v) => `blur(${v})`).join(' ')
+                : `blur(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('blur'))
+    }
+  }
+}
diff --git a/src/plugins/brightness.js b/src/plugins/brightness.js
new file mode 100644
index 000000000000..0b632da99974
--- /dev/null
+++ b/src/plugins/brightness.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        brightness: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.brightness)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('brightness', modifier)]: { '--tw-brightness': `brightness(${value})` },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('brightness'), (value, modifier) => {
+          return [
+            nameClass('brightness', modifier),
+            {
+              '--tw-brightness': Array.isArray(value)
+                ? value.map((v) => `brightness(${v})`).join(' ')
+                : `brightness(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('brightness'))
+    }
+  }
+}
diff --git a/src/plugins/contrast.js b/src/plugins/contrast.js
new file mode 100644
index 000000000000..7593f98512c3
--- /dev/null
+++ b/src/plugins/contrast.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        contrast: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.contrast)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('contrast', modifier)]: { '--tw-contrast': `contrast(${value})` },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('contrast'), (value, modifier) => {
+          return [
+            nameClass('contrast', modifier),
+            {
+              '--tw-contrast': Array.isArray(value)
+                ? value.map((v) => `contrast(${v})`).join(' ')
+                : `contrast(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('contrast'))
+    }
+  }
+}
diff --git a/src/plugins/dropShadow.js b/src/plugins/dropShadow.js
new file mode 100644
index 000000000000..83ac804701ec
--- /dev/null
+++ b/src/plugins/dropShadow.js
@@ -0,0 +1,21 @@
+import _ from 'lodash'
+import nameClass from '../util/nameClass'
+
+export default function () {
+  return function ({ addUtilities, theme, variants }) {
+    const utilities = _.fromPairs(
+      _.map(theme('dropShadow'), (value, modifier) => {
+        return [
+          nameClass('drop-shadow', modifier),
+          {
+            '--tw-drop-shadow': Array.isArray(value)
+              ? value.map((v) => `drop-shadow(${v})`).join(' ')
+              : `drop-shadow(${value})`,
+          },
+        ]
+      })
+    )
+
+    addUtilities(utilities, variants('dropShadow'))
+  }
+}
diff --git a/src/plugins/filter.js b/src/plugins/filter.js
new file mode 100644
index 000000000000..7f1d6005f053
--- /dev/null
+++ b/src/plugins/filter.js
@@ -0,0 +1,32 @@
+export default function () {
+  return function ({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.filter': {
+          '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
+          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)',
+          ].join(' '),
+        },
+        '.filter-none': { filter: 'none' },
+      },
+      variants('filter')
+    )
+  }
+}
diff --git a/src/plugins/grayscale.js b/src/plugins/grayscale.js
new file mode 100644
index 000000000000..3250d6c4ac33
--- /dev/null
+++ b/src/plugins/grayscale.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        grayscale: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.grayscale)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('grayscale', modifier)]: { '--tw-grayscale': `grayscale(${value})` },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('grayscale'), (value, modifier) => {
+          return [
+            nameClass('grayscale', modifier),
+            {
+              '--tw-grayscale': Array.isArray(value)
+                ? value.map((v) => `grayscale(${v})`).join(' ')
+                : `grayscale(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('grayscale'))
+    }
+  }
+}
diff --git a/src/plugins/hueRotate.js b/src/plugins/hueRotate.js
new file mode 100644
index 000000000000..8dff3f6bf3fb
--- /dev/null
+++ b/src/plugins/hueRotate.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        'hue-rotate': (modifier, { theme }) => {
+          let value = asValue(modifier, theme.hueRotate)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('hue-rotate', modifier)]: { '--tw-hue-rotate': `hue-rotate(${value})` },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('hueRotate'), (value, modifier) => {
+          return [
+            nameClass('hue-rotate', modifier),
+            {
+              '--tw-hue-rotate': Array.isArray(value)
+                ? value.map((v) => `hue-rotate(${v})`).join(' ')
+                : `hue-rotate(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('hueRotate'))
+    }
+  }
+}
diff --git a/src/plugins/index.js b/src/plugins/index.js
index ff11ad996964..2386bea36d01 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -4,6 +4,16 @@ export { default as alignItems } from './alignItems'
 export { default as alignSelf } from './alignSelf'
 export { default as animation } from './animation'
 export { default as appearance } from './appearance'
+export { default as backdropBlur } from './backdropBlur'
+export { default as backdropBrightness } from './backdropBrightness'
+export { default as backdropContrast } from './backdropContrast'
+export { default as backdropFilter } from './backdropFilter'
+export { default as backdropGrayscale } from './backdropGrayscale'
+export { default as backdropHueRotate } from './backdropHueRotate'
+export { default as backdropInvert } from './backdropInvert'
+export { default as backdropOpacity } from './backdropOpacity'
+export { default as backdropSaturate } from './backdropSaturate'
+export { default as backdropSepia } from './backdropSepia'
 export { default as backgroundAttachment } from './backgroundAttachment'
 export { default as backgroundBlendMode } from './backgroundBlendMode'
 export { default as backgroundClip } from './backgroundClip'
@@ -13,6 +23,7 @@ export { default as backgroundOpacity } from './backgroundOpacity'
 export { default as backgroundPosition } from './backgroundPosition'
 export { default as backgroundRepeat } from './backgroundRepeat'
 export { default as backgroundSize } from './backgroundSize'
+export { default as blur } from './blur'
 export { default as borderCollapse } from './borderCollapse'
 export { default as borderColor } from './borderColor'
 export { default as borderOpacity } from './borderOpacity'
@@ -22,15 +33,19 @@ export { default as borderWidth } from './borderWidth'
 export { default as boxDecorationBreak } from './boxDecorationBreak'
 export { default as boxShadow } from './boxShadow'
 export { default as boxSizing } from './boxSizing'
+export { default as brightness } from './brightness'
 export { default as clear } from './clear'
 export { default as container } from './container'
+export { default as contrast } from './contrast'
 export { default as cursor } from './cursor'
 export { default as display } from './display'
 export { default as divideColor } from './divideColor'
 export { default as divideOpacity } from './divideOpacity'
 export { default as divideStyle } from './divideStyle'
 export { default as divideWidth } from './divideWidth'
+export { default as dropShadow } from './dropShadow'
 export { default as fill } from './fill'
+export { default as filter } from './filter'
 export { default as flex } from './flex'
 export { default as flexDirection } from './flexDirection'
 export { default as flexGrow } from './flexGrow'
@@ -45,6 +60,7 @@ export { default as fontVariantNumeric } from './fontVariantNumeric'
 export { default as fontWeight } from './fontWeight'
 export { default as gap } from './gap'
 export { default as gradientColorStops } from './gradientColorStops'
+export { default as grayscale } from './grayscale'
 export { default as gridAutoColumns } from './gridAutoColumns'
 export { default as gridAutoFlow } from './gridAutoFlow'
 export { default as gridAutoRows } from './gridAutoRows'
@@ -57,7 +73,9 @@ export { default as gridRowStart } from './gridRowStart'
 export { default as gridTemplateColumns } from './gridTemplateColumns'
 export { default as gridTemplateRows } from './gridTemplateRows'
 export { default as height } from './height'
+export { default as hueRotate } from './hueRotate'
 export { default as inset } from './inset'
+export { default as invert } from './invert'
 export { default as isolation } from './isolation'
 export { default as justifyContent } from './justifyContent'
 export { default as justifyItems } from './justifyItems'
@@ -95,7 +113,9 @@ export { default as ringOffsetWidth } from './ringOffsetWidth'
 export { default as ringOpacity } from './ringOpacity'
 export { default as ringWidth } from './ringWidth'
 export { default as rotate } from './rotate'
+export { default as saturate } from './saturate'
 export { default as scale } from './scale'
+export { default as sepia } from './sepia'
 export { default as skew } from './skew'
 export { default as space } from './space'
 export { default as stroke } from './stroke'
diff --git a/src/plugins/invert.js b/src/plugins/invert.js
new file mode 100644
index 000000000000..9a313fd1e9a5
--- /dev/null
+++ b/src/plugins/invert.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        invert: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.invert)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('invert', modifier)]: { '--tw-invert': `invert(${value})` },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('invert'), (value, modifier) => {
+          return [
+            nameClass('invert', modifier),
+            {
+              '--tw-invert': Array.isArray(value)
+                ? value.map((v) => `invert(${v})`).join(' ')
+                : `invert(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('invert'))
+    }
+  }
+}
diff --git a/src/plugins/saturate.js b/src/plugins/saturate.js
new file mode 100644
index 000000000000..b1a2d8eb8913
--- /dev/null
+++ b/src/plugins/saturate.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        saturate: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.saturate)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('saturate', modifier)]: { '--tw-saturate': `saturate(${value})` },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('saturate'), (value, modifier) => {
+          return [
+            nameClass('saturate', modifier),
+            {
+              '--tw-saturate': Array.isArray(value)
+                ? value.map((v) => `saturate(${v})`).join(' ')
+                : `saturate(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('saturate'))
+    }
+  }
+}
diff --git a/src/plugins/sepia.js b/src/plugins/sepia.js
new file mode 100644
index 000000000000..eb7446e5b107
--- /dev/null
+++ b/src/plugins/sepia.js
@@ -0,0 +1,37 @@
+import _ from 'lodash'
+const { asValue, nameClass } = require('../../jit/pluginUtils')
+
+export default function () {
+  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
+    if (config('mode') === 'jit') {
+      matchUtilities({
+        sepia: (modifier, { theme }) => {
+          let value = asValue(modifier, theme.sepia)
+
+          if (value === undefined) {
+            return []
+          }
+
+          return {
+            [nameClass('sepia', modifier)]: { '--tw-sepia': `sepia(${value})` },
+          }
+        },
+      })
+    } else {
+      const utilities = _.fromPairs(
+        _.map(theme('sepia'), (value, modifier) => {
+          return [
+            nameClass('sepia', modifier),
+            {
+              '--tw-sepia': Array.isArray(value)
+                ? value.map((v) => `sepia(${v})`).join(' ')
+                : `sepia(${value})`,
+            },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('sepia'))
+    }
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index b029353a3b14..7e7b8bb1392d 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -71,6 +71,15 @@ module.exports = {
       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       bounce: 'bounce 1s infinite',
     },
+    backdropBlur: (theme) => theme('blur'),
+    backdropBrightness: (theme) => theme('brightness'),
+    backdropContrast: (theme) => theme('contrast'),
+    backdropGrayscale: (theme) => theme('grayscale'),
+    backdropHueRotate: (theme) => theme('hueRotate'),
+    backdropInvert: (theme) => theme('invert'),
+    backdropOpacity: (theme) => theme('opacity'),
+    backdropSaturate: (theme) => theme('saturate'),
+    backdropSepia: (theme) => theme('sepia'),
     backgroundColor: (theme) => theme('colors'),
     backgroundImage: {
       none: 'none',
@@ -100,6 +109,29 @@ module.exports = {
       cover: 'cover',
       contain: 'contain',
     },
+    blur: {
+      0: '0',
+      sm: '4px',
+      DEFAULT: '8px',
+      md: '12px',
+      lg: '16px',
+      xl: '24px',
+      '2xl': '40px',
+      '3xl': '64px',
+    },
+    brightness: {
+      0: '0',
+      50: '.5',
+      75: '.75',
+      90: '.9',
+      95: '.95',
+      100: '1',
+      105: '1.05',
+      110: '1.1',
+      125: '1.25',
+      150: '1.5',
+      200: '2',
+    },
     borderColor: (theme) => ({
       ...theme('colors'),
       DEFAULT: theme('colors.gray.200', 'currentColor'),
@@ -133,6 +165,15 @@ module.exports = {
       inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
       none: 'none',
     },
+    contrast: {
+      0: '0',
+      50: '.5',
+      75: '.75',
+      100: '1',
+      125: '1.25',
+      150: '1.5',
+      200: '2',
+    },
     container: {},
     cursor: {
       auto: 'auto',
@@ -147,7 +188,37 @@ module.exports = {
     divideColor: (theme) => theme('borderColor'),
     divideOpacity: (theme) => theme('borderOpacity'),
     divideWidth: (theme) => theme('borderWidth'),
+    dropShadow: {
+      sm: '0 1px 1px rgba(0,0,0,0.05)',
+      DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
+      md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
+      lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
+      xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
+      '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
+      none: '0 0 #0000',
+    },
     fill: { current: 'currentColor' },
+    grayscale: {
+      0: '0',
+      DEFAULT: '100%',
+    },
+    hueRotate: {
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-60': '-60deg',
+      '-30': '-30deg',
+      '-15': '-15deg',
+      0: '0deg',
+      15: '15deg',
+      30: '30deg',
+      60: '60deg',
+      90: '90deg',
+      180: '180deg',
+    },
+    invert: {
+      0: '0',
+      DEFAULT: '100%',
+    },
     flex: {
       1: '1 1 0%',
       auto: '1 1 auto',
@@ -567,6 +638,13 @@ module.exports = {
       90: '90deg',
       180: '180deg',
     },
+    saturate: {
+      0: '0',
+      50: '.5',
+      100: '1',
+      150: '1.5',
+      200: '2',
+    },
     scale: {
       0: '0',
       50: '.5',
@@ -579,6 +657,10 @@ module.exports = {
       125: '1.25',
       150: '1.5',
     },
+    sepia: {
+      0: '0',
+      DEFAULT: '100%',
+    },
     skew: {
       '-12': '-12deg',
       '-6': '-6deg',
@@ -641,7 +723,8 @@ module.exports = {
     transitionProperty: {
       none: 'none',
       all: 'all',
-      DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+      DEFAULT:
+        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
       colors: 'background-color, border-color, color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
@@ -739,6 +822,16 @@ module.exports = {
     alignSelf: ['responsive'],
     animation: ['responsive'],
     appearance: ['responsive'],
+    backdropBlur: ['responsive'],
+    backdropBrightness: ['responsive'],
+    backdropContrast: ['responsive'],
+    backdropDropShadow: ['responsive'],
+    backdropFilter: ['responsive'],
+    backdropGrayscale: ['responsive'],
+    backdropHueRotate: ['responsive'],
+    backdropInvert: ['responsive'],
+    backdropSaturate: ['responsive'],
+    backdropSepia: ['responsive'],
     backgroundAttachment: ['responsive'],
     backgroundBlendMode: ['responsive'],
     backgroundClip: ['responsive'],
@@ -748,6 +841,7 @@ module.exports = {
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
+    blur: ['responsive'],
     borderCollapse: ['responsive'],
     borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
     borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
@@ -757,15 +851,19 @@ module.exports = {
     boxDecorationBreak: ['responsive'],
     boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
     boxSizing: ['responsive'],
+    brightness: ['responsive'],
     clear: ['responsive'],
     container: ['responsive'],
+    contrast: ['responsive'],
     cursor: ['responsive'],
     display: ['responsive'],
     divideColor: ['responsive', 'dark'],
     divideOpacity: ['responsive', 'dark'],
     divideStyle: ['responsive'],
     divideWidth: ['responsive'],
+    dropShadow: ['responsive'],
     fill: ['responsive'],
+    filter: ['responsive'],
     flex: ['responsive'],
     flexDirection: ['responsive'],
     flexGrow: ['responsive'],
@@ -780,6 +878,7 @@ module.exports = {
     fontWeight: ['responsive'],
     gap: ['responsive'],
     gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
+    grayscale: ['responsive'],
     gridAutoColumns: ['responsive'],
     gridAutoFlow: ['responsive'],
     gridAutoRows: ['responsive'],
@@ -792,7 +891,9 @@ module.exports = {
     gridTemplateColumns: ['responsive'],
     gridTemplateRows: ['responsive'],
     height: ['responsive'],
+    hueRotate: ['responsive'],
     inset: ['responsive'],
+    invert: ['responsive'],
     isolation: ['responsive'],
     justifyContent: ['responsive'],
     justifyItems: ['responsive'],
@@ -829,7 +930,9 @@ module.exports = {
     ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
     ringWidth: ['responsive', 'focus-within', 'focus'],
     rotate: ['responsive', 'hover', 'focus'],
+    saturate: ['responsive'],
     scale: ['responsive', 'hover', 'focus'],
+    sepia: ['responsive'],
     skew: ['responsive', 'hover', 'focus'],
     space: ['responsive'],
     stroke: ['responsive'],