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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+