From e8ced9378b5bb0791c1833425a5fad1e9e0a4d9a Mon Sep 17 00:00:00 2001 From: Nick Schmidt Date: Thu, 4 Jun 2020 16:42:43 +0200 Subject: [PATCH 01/17] Implement `filter` helper classes with all methods --- src/plugins/filter.js | 36 ++++++++++++++++ src/plugins/filterBlur.js | 7 ++++ src/plugins/filterBrightness.js | 7 ++++ src/plugins/filterContrast.js | 7 ++++ src/plugins/filterGrayscale.js | 7 ++++ src/plugins/filterHueRotate.js | 7 ++++ src/plugins/filterInvert.js | 7 ++++ src/plugins/filterOpacity.js | 7 ++++ src/plugins/filterSaturate.js | 7 ++++ src/plugins/filterSepia.js | 7 ++++ stubs/defaultConfig.stub.js | 73 +++++++++++++++++++++++++++++++++ 11 files changed, 172 insertions(+) create mode 100644 src/plugins/filter.js create mode 100644 src/plugins/filterBlur.js create mode 100644 src/plugins/filterBrightness.js create mode 100644 src/plugins/filterContrast.js create mode 100644 src/plugins/filterGrayscale.js create mode 100644 src/plugins/filterHueRotate.js create mode 100644 src/plugins/filterInvert.js create mode 100644 src/plugins/filterOpacity.js create mode 100644 src/plugins/filterSaturate.js create mode 100644 src/plugins/filterSepia.js diff --git a/src/plugins/filter.js b/src/plugins/filter.js new file mode 100644 index 000000000000..aad1d9277332 --- /dev/null +++ b/src/plugins/filter.js @@ -0,0 +1,36 @@ +export default function() { + return function({ addUtilities, variants, target }) { + if (target('filter') === 'ie11') { + return + } + + addUtilities( + { + '.filter': { + '--filter-blur': '0', + '--filter-brightness': '100%', + '--filter-contrast': '100%', + '--filter-grayscale': '0', + '--filter-hue-rotate': '0deg', + '--filter-invert': '0', + '--filter-opacity': '100%', + '--filter-saturate': '100%', + '--filter-sepia': '0', + filter: [ + 'blur(var(--filter-blur))', + 'brightness(var(--filter-brightness))', + 'contrast(var(--filter-contrast))', + 'grayscale(var(--filter-grayscale))', + 'hue-rotate(var(--filter-hue-rotate))', + 'invert(var(--filter-invert))', + 'opacity(var(--filter-opacity))', + 'saturate(var(--filter-saturate))', + 'sepia(var(--filter-sepia))', + ].join(' '), + }, + '.filter-none': { filter: 'none' }, + }, + variants('filter') + ) + } +} diff --git a/src/plugins/filterBlur.js b/src/plugins/filterBlur.js new file mode 100644 index 000000000000..b054d20bba4c --- /dev/null +++ b/src/plugins/filterBlur.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterBlur', [['f-blur', ['--filter-blur']]])({ target, ...args }) + } +} diff --git a/src/plugins/filterBrightness.js b/src/plugins/filterBrightness.js new file mode 100644 index 000000000000..c2f754bbc861 --- /dev/null +++ b/src/plugins/filterBrightness.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterBrightness', [['f-brightness', ['--filter-brightness']]])({ target, ...args }) + } +} diff --git a/src/plugins/filterContrast.js b/src/plugins/filterContrast.js new file mode 100644 index 000000000000..3c4f3194e43e --- /dev/null +++ b/src/plugins/filterContrast.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterContrast', [['f-contrast', ['--filter-contrast']]])({ target, ...args }) + } +} diff --git a/src/plugins/filterGrayscale.js b/src/plugins/filterGrayscale.js new file mode 100644 index 000000000000..8f78af0637c1 --- /dev/null +++ b/src/plugins/filterGrayscale.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterGrayscale', [['f-grayscale', ['--filter-grayscale']]])({ target, ...args }) + } +} diff --git a/src/plugins/filterHueRotate.js b/src/plugins/filterHueRotate.js new file mode 100644 index 000000000000..0bbf92d465a0 --- /dev/null +++ b/src/plugins/filterHueRotate.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterHueRotate', [['f-hue-rotate', ['--filter-hue-rotate']]])({ target, ...args }) + } +} diff --git a/src/plugins/filterInvert.js b/src/plugins/filterInvert.js new file mode 100644 index 000000000000..7e84892677de --- /dev/null +++ b/src/plugins/filterInvert.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterInvert', [['f-invert', ['--filter-invert']]])({ target, ...args }) + } +} diff --git a/src/plugins/filterOpacity.js b/src/plugins/filterOpacity.js new file mode 100644 index 000000000000..9cfd17401a73 --- /dev/null +++ b/src/plugins/filterOpacity.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterOpacity', [['f-opacity', ['--filter-opacity']]])({ target, ...args }) + } +} diff --git a/src/plugins/filterSaturate.js b/src/plugins/filterSaturate.js new file mode 100644 index 000000000000..cea1cab62d03 --- /dev/null +++ b/src/plugins/filterSaturate.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterSaturate', [['f-saturate', ['--filter-saturate']]])({ target, ...args }) + } +} diff --git a/src/plugins/filterSepia.js b/src/plugins/filterSepia.js new file mode 100644 index 000000000000..1284f3ae15d9 --- /dev/null +++ b/src/plugins/filterSepia.js @@ -0,0 +1,7 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function({ target, ...args }) { + createUtilityPlugin('filterSepia', [['f-sepia', ['--filter-sepia']]])({ target, ...args }) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index b029353a3b14..9bb9209f64fe 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -148,6 +148,79 @@ module.exports = { divideOpacity: (theme) => theme('borderOpacity'), divideWidth: (theme) => theme('borderWidth'), fill: { current: 'currentColor' }, + filter: { + default: '', + }, + filterBlur: { + 0: '0', + 2: '2px', + 4: '4px', + 8: '8px', + 12: '12px', + 16: '16px', + 20: '20px', + 24: '24px', + 28: '28px', + 32: '32px', + }, + filterBrightness: { + 0: '0', + 25: '25%', + 50: '50%', + 75: '75%', + 100: '100%', + }, + filterContrast: { + 0: '0', + 25: '25%', + 50: '50%', + 75: '75%', + 100: '100%', + }, + filterGrayscale: { + 0: '0', + 25: '25%', + 50: '50%', + 75: '75%', + 100: '100%', + }, + filterHueRotate: { + '-180': '-180deg', + '-90': '-90deg', + '-45': '-45deg', + 0: '0', + 45: '45deg', + 90: '90deg', + 180: '180deg', + }, + filterInvert: { + 0: '0', + 25: '25%', + 50: '50%', + 75: '75%', + 100: '100%', + }, + filterOpacity: { + 0: '0', + 25: '25%', + 50: '50%', + 75: '75%', + 100: '100%', + }, + filterSaturate: { + 0: '0', + 25: '25%', + 50: '50%', + 75: '75%', + 100: '100%', + }, + filterSepia: { + 0: '0', + 25: '25%', + 50: '50%', + 75: '75%', + 100: '100%', + }, flex: { 1: '1 1 0%', auto: '1 1 auto', From 781a1d86e50ca75cd2bb975d333919f30ac0c465 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 3 Apr 2021 15:02:16 -0400 Subject: [PATCH 02/17] Rename filter plugins/utilities, drop filter opacity, add drop shadow --- src/corePluginList.js | 10 ++++++++ src/plugins/blur.js | 21 ++++++++++++++++ src/plugins/brightness.js | 21 ++++++++++++++++ src/plugins/contrast.js | 21 ++++++++++++++++ src/plugins/dropShadow.js | 21 ++++++++++++++++ src/plugins/filter.js | 44 +++++++++++++++------------------ src/plugins/filterBlur.js | 7 ------ src/plugins/filterBrightness.js | 7 ------ src/plugins/filterContrast.js | 7 ------ src/plugins/filterGrayscale.js | 7 ------ src/plugins/filterHueRotate.js | 7 ------ src/plugins/filterInvert.js | 7 ------ src/plugins/filterOpacity.js | 7 ------ src/plugins/filterSaturate.js | 7 ------ src/plugins/filterSepia.js | 7 ------ src/plugins/grayscale.js | 21 ++++++++++++++++ src/plugins/hueRotate.js | 21 ++++++++++++++++ src/plugins/index.js | 10 ++++++++ src/plugins/invert.js | 21 ++++++++++++++++ src/plugins/saturate.js | 21 ++++++++++++++++ src/plugins/sepia.js | 21 ++++++++++++++++ stubs/defaultConfig.stub.js | 35 +++++++++++++------------- 22 files changed, 246 insertions(+), 105 deletions(-) create mode 100644 src/plugins/blur.js create mode 100644 src/plugins/brightness.js create mode 100644 src/plugins/contrast.js create mode 100644 src/plugins/dropShadow.js delete mode 100644 src/plugins/filterBlur.js delete mode 100644 src/plugins/filterBrightness.js delete mode 100644 src/plugins/filterContrast.js delete mode 100644 src/plugins/filterGrayscale.js delete mode 100644 src/plugins/filterHueRotate.js delete mode 100644 src/plugins/filterInvert.js delete mode 100644 src/plugins/filterOpacity.js delete mode 100644 src/plugins/filterSaturate.js delete mode 100644 src/plugins/filterSepia.js create mode 100644 src/plugins/grayscale.js create mode 100644 src/plugins/hueRotate.js create mode 100644 src/plugins/invert.js create mode 100644 src/plugins/saturate.js create mode 100644 src/plugins/sepia.js diff --git a/src/corePluginList.js b/src/corePluginList.js index 9f6538d40d70..f471d5bcbf57 100644 --- a/src/corePluginList.js +++ b/src/corePluginList.js @@ -122,4 +122,14 @@ export const corePluginList = [ 'animation', 'mixBlendMode', 'backgroundBlendMode', + 'filter', + 'blur', + 'brightness', + 'contrast', + 'dropShadow', + 'grayscale', + 'hueRotate', + 'invert', + 'saturate', + 'sepia', ] diff --git a/src/plugins/blur.js b/src/plugins/blur.js new file mode 100644 index 000000000000..f0a77e71d47a --- /dev/null +++ b/src/plugins/blur.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('blur'), (value, modifier) => { + return [ + nameClass('blur', modifier), + { + '--tw-blur': Array.isArray(value) + ? value.map((v) => `blur(${v})`).join(' ') + : `blur(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('blur')) + } +} diff --git a/src/plugins/brightness.js b/src/plugins/brightness.js new file mode 100644 index 000000000000..25fb5a5b5488 --- /dev/null +++ b/src/plugins/brightness.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('brightness'), (value, modifier) => { + return [ + nameClass('brightness', modifier), + { + '--tw-brightness': Array.isArray(value) + ? value.map((v) => `brightness(${v})`).join(' ') + : `brightness(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('brightness')) + } +} diff --git a/src/plugins/contrast.js b/src/plugins/contrast.js new file mode 100644 index 000000000000..9d60283b9351 --- /dev/null +++ b/src/plugins/contrast.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('contrast'), (value, modifier) => { + return [ + nameClass('contrast', modifier), + { + '--tw-contrast': Array.isArray(value) + ? value.map((v) => `contrast(${v})`).join(' ') + : `contrast(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('contrast')) + } +} diff --git a/src/plugins/dropShadow.js b/src/plugins/dropShadow.js new file mode 100644 index 000000000000..83ac804701ec --- /dev/null +++ b/src/plugins/dropShadow.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('dropShadow'), (value, modifier) => { + return [ + nameClass('drop-shadow', modifier), + { + '--tw-drop-shadow': Array.isArray(value) + ? value.map((v) => `drop-shadow(${v})`).join(' ') + : `drop-shadow(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('dropShadow')) + } +} diff --git a/src/plugins/filter.js b/src/plugins/filter.js index aad1d9277332..a88a723fcac4 100644 --- a/src/plugins/filter.js +++ b/src/plugins/filter.js @@ -1,31 +1,27 @@ -export default function() { - return function({ addUtilities, variants, target }) { - if (target('filter') === 'ie11') { - return - } - +export default function () { + return function ({ addUtilities, variants }) { addUtilities( { '.filter': { - '--filter-blur': '0', - '--filter-brightness': '100%', - '--filter-contrast': '100%', - '--filter-grayscale': '0', - '--filter-hue-rotate': '0deg', - '--filter-invert': '0', - '--filter-opacity': '100%', - '--filter-saturate': '100%', - '--filter-sepia': '0', + '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-drop-shadow': '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,/*!*/ /*!*/)', filter: [ - 'blur(var(--filter-blur))', - 'brightness(var(--filter-brightness))', - 'contrast(var(--filter-contrast))', - 'grayscale(var(--filter-grayscale))', - 'hue-rotate(var(--filter-hue-rotate))', - 'invert(var(--filter-invert))', - 'opacity(var(--filter-opacity))', - 'saturate(var(--filter-saturate))', - 'sepia(var(--filter-sepia))', + 'var(--tw-blur)', + 'var(--tw-brightness)', + 'var(--tw-contrast)', + 'var(--tw-drop-shadow)', + 'var(--tw-grayscale)', + 'var(--tw-hue-rotate)', + 'var(--tw-invert)', + 'var(--tw-saturate)', + 'var(--tw-sepia)', ].join(' '), }, '.filter-none': { filter: 'none' }, diff --git a/src/plugins/filterBlur.js b/src/plugins/filterBlur.js deleted file mode 100644 index b054d20bba4c..000000000000 --- a/src/plugins/filterBlur.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterBlur', [['f-blur', ['--filter-blur']]])({ target, ...args }) - } -} diff --git a/src/plugins/filterBrightness.js b/src/plugins/filterBrightness.js deleted file mode 100644 index c2f754bbc861..000000000000 --- a/src/plugins/filterBrightness.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterBrightness', [['f-brightness', ['--filter-brightness']]])({ target, ...args }) - } -} diff --git a/src/plugins/filterContrast.js b/src/plugins/filterContrast.js deleted file mode 100644 index 3c4f3194e43e..000000000000 --- a/src/plugins/filterContrast.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterContrast', [['f-contrast', ['--filter-contrast']]])({ target, ...args }) - } -} diff --git a/src/plugins/filterGrayscale.js b/src/plugins/filterGrayscale.js deleted file mode 100644 index 8f78af0637c1..000000000000 --- a/src/plugins/filterGrayscale.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterGrayscale', [['f-grayscale', ['--filter-grayscale']]])({ target, ...args }) - } -} diff --git a/src/plugins/filterHueRotate.js b/src/plugins/filterHueRotate.js deleted file mode 100644 index 0bbf92d465a0..000000000000 --- a/src/plugins/filterHueRotate.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterHueRotate', [['f-hue-rotate', ['--filter-hue-rotate']]])({ target, ...args }) - } -} diff --git a/src/plugins/filterInvert.js b/src/plugins/filterInvert.js deleted file mode 100644 index 7e84892677de..000000000000 --- a/src/plugins/filterInvert.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterInvert', [['f-invert', ['--filter-invert']]])({ target, ...args }) - } -} diff --git a/src/plugins/filterOpacity.js b/src/plugins/filterOpacity.js deleted file mode 100644 index 9cfd17401a73..000000000000 --- a/src/plugins/filterOpacity.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterOpacity', [['f-opacity', ['--filter-opacity']]])({ target, ...args }) - } -} diff --git a/src/plugins/filterSaturate.js b/src/plugins/filterSaturate.js deleted file mode 100644 index cea1cab62d03..000000000000 --- a/src/plugins/filterSaturate.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterSaturate', [['f-saturate', ['--filter-saturate']]])({ target, ...args }) - } -} diff --git a/src/plugins/filterSepia.js b/src/plugins/filterSepia.js deleted file mode 100644 index 1284f3ae15d9..000000000000 --- a/src/plugins/filterSepia.js +++ /dev/null @@ -1,7 +0,0 @@ -import createUtilityPlugin from '../util/createUtilityPlugin' - -export default function() { - return function({ target, ...args }) { - createUtilityPlugin('filterSepia', [['f-sepia', ['--filter-sepia']]])({ target, ...args }) - } -} diff --git a/src/plugins/grayscale.js b/src/plugins/grayscale.js new file mode 100644 index 000000000000..6b33b4ce2c0e --- /dev/null +++ b/src/plugins/grayscale.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('grayscale'), (value, modifier) => { + return [ + nameClass('grayscale', modifier), + { + '--tw-grayscale': Array.isArray(value) + ? value.map((v) => `grayscale(${v})`).join(' ') + : `grayscale(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('grayscale')) + } +} diff --git a/src/plugins/hueRotate.js b/src/plugins/hueRotate.js new file mode 100644 index 000000000000..c86b0f82711c --- /dev/null +++ b/src/plugins/hueRotate.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('hueRotate'), (value, modifier) => { + return [ + nameClass('hue-rotate', modifier), + { + '--tw-hue-rotate': Array.isArray(value) + ? value.map((v) => `hue-rotate(${v})`).join(' ') + : `hue-rotate(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('hueRotate')) + } +} diff --git a/src/plugins/index.js b/src/plugins/index.js index ff11ad996964..5fbc254a1e49 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -13,6 +13,7 @@ export { default as backgroundOpacity } from './backgroundOpacity' export { default as backgroundPosition } from './backgroundPosition' export { default as backgroundRepeat } from './backgroundRepeat' export { default as backgroundSize } from './backgroundSize' +export { default as blur } from './blur' export { default as borderCollapse } from './borderCollapse' export { default as borderColor } from './borderColor' export { default as borderOpacity } from './borderOpacity' @@ -22,15 +23,19 @@ export { default as borderWidth } from './borderWidth' export { default as boxDecorationBreak } from './boxDecorationBreak' export { default as boxShadow } from './boxShadow' export { default as boxSizing } from './boxSizing' +export { default as brightness } from './brightness' export { default as clear } from './clear' export { default as container } from './container' +export { default as contrast } from './contrast' export { default as cursor } from './cursor' export { default as display } from './display' export { default as divideColor } from './divideColor' export { default as divideOpacity } from './divideOpacity' export { default as divideStyle } from './divideStyle' export { default as divideWidth } from './divideWidth' +export { default as dropShadow } from './dropShadow' export { default as fill } from './fill' +export { default as filter } from './filter' export { default as flex } from './flex' export { default as flexDirection } from './flexDirection' export { default as flexGrow } from './flexGrow' @@ -45,6 +50,7 @@ export { default as fontVariantNumeric } from './fontVariantNumeric' export { default as fontWeight } from './fontWeight' export { default as gap } from './gap' export { default as gradientColorStops } from './gradientColorStops' +export { default as grayscale } from './grayscale' export { default as gridAutoColumns } from './gridAutoColumns' export { default as gridAutoFlow } from './gridAutoFlow' export { default as gridAutoRows } from './gridAutoRows' @@ -57,7 +63,9 @@ export { default as gridRowStart } from './gridRowStart' export { default as gridTemplateColumns } from './gridTemplateColumns' export { default as gridTemplateRows } from './gridTemplateRows' export { default as height } from './height' +export { default as hueRotate } from './hueRotate' export { default as inset } from './inset' +export { default as invert } from './invert' export { default as isolation } from './isolation' export { default as justifyContent } from './justifyContent' export { default as justifyItems } from './justifyItems' @@ -95,7 +103,9 @@ export { default as ringOffsetWidth } from './ringOffsetWidth' export { default as ringOpacity } from './ringOpacity' export { default as ringWidth } from './ringWidth' export { default as rotate } from './rotate' +export { default as saturate } from './saturate' export { default as scale } from './scale' +export { default as sepia } from './sepia' export { default as skew } from './skew' export { default as space } from './space' export { default as stroke } from './stroke' diff --git a/src/plugins/invert.js b/src/plugins/invert.js new file mode 100644 index 000000000000..63b1d36eae58 --- /dev/null +++ b/src/plugins/invert.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('invert'), (value, modifier) => { + return [ + nameClass('invert', modifier), + { + '--tw-invert': Array.isArray(value) + ? value.map((v) => `invert(${v})`).join(' ') + : `invert(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('invert')) + } +} diff --git a/src/plugins/saturate.js b/src/plugins/saturate.js new file mode 100644 index 000000000000..228800fe98d0 --- /dev/null +++ b/src/plugins/saturate.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('saturate'), (value, modifier) => { + return [ + nameClass('saturate', modifier), + { + '--tw-saturate': Array.isArray(value) + ? value.map((v) => `saturate(${v})`).join(' ') + : `saturate(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('saturate')) + } +} diff --git a/src/plugins/sepia.js b/src/plugins/sepia.js new file mode 100644 index 000000000000..e38ffb2ac409 --- /dev/null +++ b/src/plugins/sepia.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('sepia'), (value, modifier) => { + return [ + nameClass('sepia', modifier), + { + '--tw-sepia': Array.isArray(value) + ? value.map((v) => `sepia(${v})`).join(' ') + : `sepia(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('sepia')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 9bb9209f64fe..16b9fe8592a5 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -148,10 +148,7 @@ module.exports = { divideOpacity: (theme) => theme('borderOpacity'), divideWidth: (theme) => theme('borderWidth'), fill: { current: 'currentColor' }, - filter: { - default: '', - }, - filterBlur: { + blur: { 0: '0', 2: '2px', 4: '4px', @@ -163,28 +160,37 @@ module.exports = { 28: '28px', 32: '32px', }, - filterBrightness: { + brightness: { 0: '0', 25: '25%', 50: '50%', 75: '75%', 100: '100%', }, - filterContrast: { + contrast: { 0: '0', 25: '25%', 50: '50%', 75: '75%', 100: '100%', }, - filterGrayscale: { + dropShadow: { + sm: '0 1px 2px rgba(0, 0, 0, 0.05)', + DEFAULT: ['0 1px 3px rgba(0, 0, 0, 0.1)', '0 1px 2px rgba(0, 0, 0, 0.06)'], + md: ['0 4px 6px rgba(0, 0, 0, 0.1)', '0 2px 4px rgba(0, 0, 0, 0.06)'], + lg: ['0 10px 15px rgba(0, 0, 0, 0.1)', '0 4px 6px rgba(0, 0, 0, 0.05)'], + xl: ['0 20px 25px rgba(0, 0, 0, 0.1)', '0 10px 10px rgba(0, 0, 0, 0.04)'], + '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)', + none: 'none', + }, + grayscale: { 0: '0', 25: '25%', 50: '50%', 75: '75%', 100: '100%', }, - filterHueRotate: { + hueRotate: { '-180': '-180deg', '-90': '-90deg', '-45': '-45deg', @@ -193,28 +199,21 @@ module.exports = { 90: '90deg', 180: '180deg', }, - filterInvert: { - 0: '0', - 25: '25%', - 50: '50%', - 75: '75%', - 100: '100%', - }, - filterOpacity: { + invert: { 0: '0', 25: '25%', 50: '50%', 75: '75%', 100: '100%', }, - filterSaturate: { + saturate: { 0: '0', 25: '25%', 50: '50%', 75: '75%', 100: '100%', }, - filterSepia: { + sepia: { 0: '0', 25: '25%', 50: '50%', From bfef939ab3f99203c052bd85e52299ce79ca77ef Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 3 Apr 2021 15:07:58 -0400 Subject: [PATCH 03/17] Remove non-final default filter values --- stubs/defaultConfig.stub.js | 53 +++++++------------------------------ 1 file changed, 9 insertions(+), 44 deletions(-) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 16b9fe8592a5..e91062694bb6 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -149,32 +149,16 @@ module.exports = { divideWidth: (theme) => theme('borderWidth'), fill: { current: 'currentColor' }, blur: { - 0: '0', - 2: '2px', - 4: '4px', - 8: '8px', - 12: '12px', - 16: '16px', - 20: '20px', - 24: '24px', - 28: '28px', - 32: '32px', + // TODO }, brightness: { - 0: '0', - 25: '25%', - 50: '50%', - 75: '75%', - 100: '100%', + // TODO }, contrast: { - 0: '0', - 25: '25%', - 50: '50%', - 75: '75%', - 100: '100%', + // TODO }, dropShadow: { + // TODO: Decide how to account for lack of spread support sm: '0 1px 2px rgba(0, 0, 0, 0.05)', DEFAULT: ['0 1px 3px rgba(0, 0, 0, 0.1)', '0 1px 2px rgba(0, 0, 0, 0.06)'], md: ['0 4px 6px rgba(0, 0, 0, 0.1)', '0 2px 4px rgba(0, 0, 0, 0.06)'], @@ -185,40 +169,21 @@ module.exports = { }, grayscale: { 0: '0', - 25: '25%', - 50: '50%', - 75: '75%', - 100: '100%', + DEFAULT: '100%', }, hueRotate: { - '-180': '-180deg', - '-90': '-90deg', - '-45': '-45deg', - 0: '0', - 45: '45deg', - 90: '90deg', - 180: '180deg', + // TODO }, invert: { 0: '0', - 25: '25%', - 50: '50%', - 75: '75%', - 100: '100%', + DEFAULT: '100%', }, saturate: { - 0: '0', - 25: '25%', - 50: '50%', - 75: '75%', - 100: '100%', + // TODO }, sepia: { 0: '0', - 25: '25%', - 50: '50%', - 75: '75%', - 100: '100%', + DEFAULT: '100%', }, flex: { 1: '1 1 0%', From 9a66ec8b9b3f196e30954998bce836ffbf75e214 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 3 Apr 2021 16:27:47 -0400 Subject: [PATCH 04/17] Working on default filter values, add basic JIT support --- jit/corePlugins/index.js | 11 +++++++++ jit/tests/basic-usage.test.css | 44 +++++++++++++++++++++++++++++++++ jit/tests/basic-usage.test.html | 3 +++ stubs/defaultConfig.stub.js | 44 +++++++++++++++++++++++++++++---- 4 files changed, 97 insertions(+), 5 deletions(-) diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js index bf42e58cbb93..f9d0b638d619 100644 --- a/jit/corePlugins/index.js +++ b/jit/corePlugins/index.js @@ -292,6 +292,17 @@ 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(), + transitionProperty: require('./transitionProperty'), transitionDelay: require('./transitionDelay'), transitionDuration: require('./transitionDuration'), diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index 55290da147d3..ce2d59e064ff 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -633,6 +633,50 @@ .ring-offset-blue-300 { --tw-ring-offset-color: #93c5fd; } +.filter { + --tw-blur: var(--tw-empty, /*!*/ /*!*/); + --tw-brightness: var(--tw-empty, /*!*/ /*!*/); + --tw-contrast: var(--tw-empty, /*!*/ /*!*/); + --tw-drop-shadow: 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, /*!*/ /*!*/); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) + var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia); +} +.filter-none { + filter: none; +} +.blur-1 { + --tw-blur: blur(1px); +} +.brightness-150 { + --tw-brightness: brightness(1.5); +} +.contrast-50 { + --tw-contrast: contrast(0.5); +} +.drop-shadow-md { + --tw-drop-shadow: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)) + drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06)); +} +.grayscale { + --tw-grayscale: grayscale(100%); +} +.hue-rotate-60 { + --tw-hue-rotate: hue-rotate(60deg); +} +.invert { + --tw-invert: invert(100%); +} +.saturate-200 { + --tw-saturate: saturate(2); +} +.sepia { + --tw-sepia: sepia(100%); +} .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html index 3ae49117afd7..bfec9c41c871 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -108,6 +108,9 @@
+
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index e91062694bb6..cdb7c79e84ca 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -149,13 +149,32 @@ module.exports = { divideWidth: (theme) => theme('borderWidth'), fill: { current: 'currentColor' }, blur: { - // TODO + // TODO: Come up with actually useful values + 1: '1px', }, brightness: { - // TODO + // TODO: Come up with actually useful values + 0: '0', + 50: '.5', + 75: '.75', + 90: '.9', + 95: '.95', + 100: '1', + 105: '1.05', + 110: '1.1', + 125: '1.25', + 150: '1.5', + 200: '2', }, contrast: { - // TODO + // TODO: Come up with actually useful values + 0: '0', + 50: '.5', + 75: '.75', + 100: '1', + 125: '1.25', + 150: '1.5', + 200: '2', }, dropShadow: { // TODO: Decide how to account for lack of spread support @@ -172,14 +191,29 @@ module.exports = { DEFAULT: '100%', }, hueRotate: { - // TODO + // TODO: Come up with actually useful values + '-180': '-180deg', + '-90': '-90deg', + '-60': '-60deg', + '-30': '-30deg', + '-15': '-15deg', + 0: '0deg', + 15: '15deg', + 30: '30deg', + 60: '60deg', + 90: '90deg', + 180: '180deg', }, invert: { 0: '0', DEFAULT: '100%', }, saturate: { - // TODO + 0: '0', + 50: '.5', + 100: '1', + 150: '1.5', + 200: '2', }, sepia: { 0: '0', From 1e608f792951f2f7ec81714e318e368432de9273 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 3 Apr 2021 16:41:24 -0400 Subject: [PATCH 05/17] Working on blur values --- jit/tests/basic-usage.test.css | 4 ++-- jit/tests/basic-usage.test.html | 2 +- stubs/defaultConfig.stub.js | 11 +++++++++-- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index ce2d59e064ff..59f9fa5da51c 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -649,8 +649,8 @@ .filter-none { filter: none; } -.blur-1 { - --tw-blur: blur(1px); +.blur-md { + --tw-blur: blur(8px); } .brightness-150 { --tw-brightness: brightness(1.5); diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html index bfec9c41c871..58d5e096c53f 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -109,7 +109,7 @@
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index cdb7c79e84ca..437c4e761263 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -150,7 +150,14 @@ module.exports = { fill: { current: 'currentColor' }, blur: { // TODO: Come up with actually useful values - 1: '1px', + 0: '0', + xs: '1px', + sm: '2px', + DEFAULT: '4px', + md: '8px', + lg: '12px', + xl: '16px', + '2xl': '24px', }, brightness: { // TODO: Come up with actually useful values @@ -184,7 +191,7 @@ module.exports = { lg: ['0 10px 15px rgba(0, 0, 0, 0.1)', '0 4px 6px rgba(0, 0, 0, 0.05)'], xl: ['0 20px 25px rgba(0, 0, 0, 0.1)', '0 10px 10px rgba(0, 0, 0, 0.04)'], '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)', - none: 'none', + none: '0 0 #0000', }, grayscale: { 0: '0', From ba8425a38169fbb427ffc237aec3fa61af85a9b6 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 15:07:53 -0400 Subject: [PATCH 06/17] New blur values (these are ~okay) --- jit/tests/basic-usage.test.css | 2 +- stubs/defaultConfig.stub.js | 15 +++++++-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index 59f9fa5da51c..ade867392cc1 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -650,7 +650,7 @@ filter: none; } .blur-md { - --tw-blur: blur(8px); + --tw-blur: blur(12px); } .brightness-150 { --tw-brightness: brightness(1.5); diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 437c4e761263..77857913f601 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -149,15 +149,14 @@ module.exports = { divideWidth: (theme) => theme('borderWidth'), fill: { current: 'currentColor' }, blur: { - // TODO: Come up with actually useful values 0: '0', - xs: '1px', - sm: '2px', - DEFAULT: '4px', - md: '8px', - lg: '12px', - xl: '16px', - '2xl': '24px', + sm: '4px', + DEFAULT: '8px', + md: '12px', + lg: '16px', + xl: '24px', + '2xl': '40px', + '3xl': '64px', }, brightness: { // TODO: Come up with actually useful values From 27bd54d7c19f50d38a6ea5c7bbdfe4e347da080c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 15:08:11 -0400 Subject: [PATCH 07/17] Match drop-shadow values to box-shadows by eye as best as possible --- stubs/defaultConfig.stub.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 77857913f601..430ae6275aa1 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -183,13 +183,12 @@ module.exports = { 200: '2', }, dropShadow: { - // TODO: Decide how to account for lack of spread support - sm: '0 1px 2px rgba(0, 0, 0, 0.05)', - DEFAULT: ['0 1px 3px rgba(0, 0, 0, 0.1)', '0 1px 2px rgba(0, 0, 0, 0.06)'], - md: ['0 4px 6px rgba(0, 0, 0, 0.1)', '0 2px 4px rgba(0, 0, 0, 0.06)'], - lg: ['0 10px 15px rgba(0, 0, 0, 0.1)', '0 4px 6px rgba(0, 0, 0, 0.05)'], - xl: ['0 20px 25px rgba(0, 0, 0, 0.1)', '0 10px 10px rgba(0, 0, 0, 0.04)'], - '2xl': '0 25px 50px rgba(0, 0, 0, 0.25)', + sm: '0 1px 1px rgba(0,0,0,0.05)', + DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'], + md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'], + lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'], + xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'], + '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)', none: '0 0 #0000', }, grayscale: { From 160c6b3422095b934c684d41e029ab15d1d8c2f2 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 15:09:18 -0400 Subject: [PATCH 08/17] Update tests --- .../fixtures/tailwind-output-flagged.css | 237 ++++++++++++++++++ .../fixtures/tailwind-output-important.css | 237 ++++++++++++++++++ .../tailwind-output-no-color-opacity.css | 237 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 237 ++++++++++++++++++ jit/tests/basic-usage.test.css | 4 +- 5 files changed, 950 insertions(+), 2 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index f82cac248a3b..b1721a66fb34 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -29273,6 +29273,243 @@ video { background-blend-mode: luminosity; } +.filter { + --tw-blur: var(--tw-empty,/*!*/ /*!*/); + --tw-brightness: var(--tw-empty,/*!*/ /*!*/); + --tw-contrast: var(--tw-empty,/*!*/ /*!*/); + --tw-drop-shadow: 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,/*!*/ /*!*/); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia); +} + +.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%); +} + .example { font-weight: 700; color: #ef4444; diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index d233ab9fe6dc..e4cbb56bc2d0 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -29273,6 +29273,243 @@ 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-drop-shadow: 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; + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) !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; +} + .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..259e8caa7ba3 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -26717,6 +26717,243 @@ video { background-blend-mode: luminosity; } +.filter { + --tw-blur: var(--tw-empty,/*!*/ /*!*/); + --tw-brightness: var(--tw-empty,/*!*/ /*!*/); + --tw-contrast: var(--tw-empty,/*!*/ /*!*/); + --tw-drop-shadow: 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,/*!*/ /*!*/); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia); +} + +.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%); +} + .example { font-weight: 700; color: #ef4444; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index f82cac248a3b..b1721a66fb34 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -29273,6 +29273,243 @@ video { background-blend-mode: luminosity; } +.filter { + --tw-blur: var(--tw-empty,/*!*/ /*!*/); + --tw-brightness: var(--tw-empty,/*!*/ /*!*/); + --tw-contrast: var(--tw-empty,/*!*/ /*!*/); + --tw-drop-shadow: 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,/*!*/ /*!*/); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia); +} + +.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%); +} + .example { font-weight: 700; color: #ef4444; diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index ade867392cc1..531525a7abd9 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -659,8 +659,8 @@ --tw-contrast: contrast(0.5); } .drop-shadow-md { - --tw-drop-shadow: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)) - drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06)); + --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) + drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); } .grayscale { --tw-grayscale: grayscale(100%); From 44af8a218166d771f3978308306cbd3ea6915a29 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 15:14:21 -0400 Subject: [PATCH 09/17] Fix kitchen sink test --- jit/tests/kitchen-sink.test.css | 8 ++++---- jit/tests/kitchen-sink.test.html | 2 +- jit/tests/kitchen-sink.test.js | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/jit/tests/kitchen-sink.test.css b/jit/tests/kitchen-sink.test.css index 75f94f5886d9..a6defa901779 100644 --- a/jit/tests/kitchen-sink.test.css +++ b/jit/tests/kitchen-sink.test.css @@ -314,11 +314,11 @@ div { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.filter-none { - filter: none; +.magic-none { + magic: none; } -.filter-grayscale { - filter: grayscale(100%); +.magic-tons { + magic: tons; } .custom-util { background: #abcdef; diff --git a/jit/tests/kitchen-sink.test.html b/jit/tests/kitchen-sink.test.html index 6f9d88e943cb..13254bece80b 100644 --- a/jit/tests/kitchen-sink.test.html +++ b/jit/tests/kitchen-sink.test.html @@ -27,7 +27,7 @@
-
+
diff --git a/jit/tests/kitchen-sink.test.js b/jit/tests/kitchen-sink.test.js index 2c971a743e6c..ae907ec87b69 100644 --- a/jit/tests/kitchen-sink.test.js +++ b/jit/tests/kitchen-sink.test.js @@ -55,11 +55,11 @@ test('it works', () => { }) addUtilities( { - '.filter-none': { - filter: 'none', + '.magic-none': { + magic: 'none', }, - '.filter-grayscale': { - filter: 'grayscale(100%)', + '.magic-tons': { + magic: 'tons', }, }, ['responsive', 'hover'] From 88a08d80a2ba733c1480e6b44b49faf4fe723d28 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 15:55:04 -0400 Subject: [PATCH 10/17] Add filter variants configuration --- stubs/defaultConfig.stub.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 430ae6275aa1..bf08cff37dcb 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -159,7 +159,6 @@ module.exports = { '3xl': '64px', }, brightness: { - // TODO: Come up with actually useful values 0: '0', 50: '.5', 75: '.75', @@ -173,7 +172,6 @@ module.exports = { 200: '2', }, contrast: { - // TODO: Come up with actually useful values 0: '0', 50: '.5', 75: '.75', @@ -196,7 +194,6 @@ module.exports = { DEFAULT: '100%', }, hueRotate: { - // TODO: Come up with actually useful values '-180': '-180deg', '-90': '-90deg', '-60': '-60deg', @@ -824,6 +821,7 @@ module.exports = { backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], backgroundSize: ['responsive'], + blur: ['responsive'], borderCollapse: ['responsive'], borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], @@ -833,15 +831,19 @@ module.exports = { boxDecorationBreak: ['responsive'], boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'], boxSizing: ['responsive'], + brightness: ['responsive'], clear: ['responsive'], container: ['responsive'], + contrast: ['responsive'], cursor: ['responsive'], display: ['responsive'], divideColor: ['responsive', 'dark'], divideOpacity: ['responsive', 'dark'], divideStyle: ['responsive'], divideWidth: ['responsive'], + dropShadow: ['responsive'], fill: ['responsive'], + filter: ['responsive'], flex: ['responsive'], flexDirection: ['responsive'], flexGrow: ['responsive'], @@ -856,6 +858,7 @@ module.exports = { fontWeight: ['responsive'], gap: ['responsive'], gradientColorStops: ['responsive', 'dark', 'hover', 'focus'], + grayscale: ['responsive'], gridAutoColumns: ['responsive'], gridAutoFlow: ['responsive'], gridAutoRows: ['responsive'], @@ -868,6 +871,7 @@ module.exports = { gridTemplateColumns: ['responsive'], gridTemplateRows: ['responsive'], height: ['responsive'], + hueRotate: ['responsive'], inset: ['responsive'], isolation: ['responsive'], justifyContent: ['responsive'], @@ -905,7 +909,9 @@ module.exports = { ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'], ringWidth: ['responsive', 'focus-within', 'focus'], rotate: ['responsive', 'hover', 'focus'], + saturate: ['responsive'], scale: ['responsive', 'hover', 'focus'], + sepia: ['responsive'], skew: ['responsive', 'hover', 'focus'], space: ['responsive'], stroke: ['responsive'], From 7e4614d5c0c40109a5d5e22252a76f7dd3b8c47a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 15:55:28 -0400 Subject: [PATCH 11/17] Move drop-shadow to end of filters list Co-Authored-By: Peter Neupauer --- src/plugins/filter.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/filter.js b/src/plugins/filter.js index a88a723fcac4..7f1d6005f053 100644 --- a/src/plugins/filter.js +++ b/src/plugins/filter.js @@ -6,22 +6,22 @@ export default function () { '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-drop-shadow': '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-drop-shadow)', 'var(--tw-grayscale)', 'var(--tw-hue-rotate)', 'var(--tw-invert)', 'var(--tw-saturate)', 'var(--tw-sepia)', + 'var(--tw-drop-shadow)', ].join(' '), }, '.filter-none': { filter: 'none' }, From 6160017bad3f4b5099a4030011f6680fa5e12141 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 17:07:16 -0400 Subject: [PATCH 12/17] Add invert variants configuration --- stubs/defaultConfig.stub.js | 1 + 1 file changed, 1 insertion(+) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index bf08cff37dcb..ccb9471fc411 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -873,6 +873,7 @@ module.exports = { height: ['responsive'], hueRotate: ['responsive'], inset: ['responsive'], + invert: ['responsive'], isolation: ['responsive'], justifyContent: ['responsive'], justifyItems: ['responsive'], From de01cefb9c789ef7b34430d7fc50ed8fd1b58809 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 17:29:44 -0400 Subject: [PATCH 13/17] Add backdrop-filter utilities --- jit/corePlugins/index.js | 11 +++++++++++ src/corePluginList.js | 10 ++++++++++ src/plugins/backdropBlur.js | 21 ++++++++++++++++++++ src/plugins/backdropBrightness.js | 21 ++++++++++++++++++++ src/plugins/backdropContrast.js | 21 ++++++++++++++++++++ src/plugins/backdropFilter.js | 32 +++++++++++++++++++++++++++++++ src/plugins/backdropGrayscale.js | 21 ++++++++++++++++++++ src/plugins/backdropHueRotate.js | 21 ++++++++++++++++++++ src/plugins/backdropInvert.js | 21 ++++++++++++++++++++ src/plugins/backdropOpacity.js | 21 ++++++++++++++++++++ src/plugins/backdropSaturate.js | 21 ++++++++++++++++++++ src/plugins/backdropSepia.js | 21 ++++++++++++++++++++ src/plugins/index.js | 10 ++++++++++ stubs/defaultConfig.stub.js | 19 ++++++++++++++++++ 14 files changed, 271 insertions(+) create mode 100644 src/plugins/backdropBlur.js create mode 100644 src/plugins/backdropBrightness.js create mode 100644 src/plugins/backdropContrast.js create mode 100644 src/plugins/backdropFilter.js create mode 100644 src/plugins/backdropGrayscale.js create mode 100644 src/plugins/backdropHueRotate.js create mode 100644 src/plugins/backdropInvert.js create mode 100644 src/plugins/backdropOpacity.js create mode 100644 src/plugins/backdropSaturate.js create mode 100644 src/plugins/backdropSepia.js diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js index f9d0b638d619..63a24da91246 100644 --- a/jit/corePlugins/index.js +++ b/jit/corePlugins/index.js @@ -303,6 +303,17 @@ module.exports = { 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/src/corePluginList.js b/src/corePluginList.js index f471d5bcbf57..67ebc8376818 100644 --- a/src/corePluginList.js +++ b/src/corePluginList.js @@ -132,4 +132,14 @@ export const corePluginList = [ 'invert', 'saturate', 'sepia', + 'backdropFilter', + 'backdropBlur', + 'backdropBrightness', + 'backdropContrast', + 'backdropGrayscale', + 'backdropHueRotate', + 'backdropInvert', + 'backdropOpacity', + 'backdropSaturate', + 'backdropSepia', ] diff --git a/src/plugins/backdropBlur.js b/src/plugins/backdropBlur.js new file mode 100644 index 000000000000..e251a7da2cc1 --- /dev/null +++ b/src/plugins/backdropBlur.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropBlur'), (value, modifier) => { + return [ + nameClass('backdrop-blur', modifier), + { + '--tw-backdrop-blur': Array.isArray(value) + ? value.map((v) => `blur(${v})`).join(' ') + : `blur(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdopBlur')) + } +} diff --git a/src/plugins/backdropBrightness.js b/src/plugins/backdropBrightness.js new file mode 100644 index 000000000000..de5ce571ed07 --- /dev/null +++ b/src/plugins/backdropBrightness.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropBrightness'), (value, modifier) => { + return [ + nameClass('backdrop-brightness', modifier), + { + '--tw-backdrop-brightness': Array.isArray(value) + ? value.map((v) => `brightness(${v})`).join(' ') + : `brightness(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdropBrightness')) + } +} diff --git a/src/plugins/backdropContrast.js b/src/plugins/backdropContrast.js new file mode 100644 index 000000000000..078807df0cad --- /dev/null +++ b/src/plugins/backdropContrast.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropContrast'), (value, modifier) => { + return [ + nameClass('backdrop-contrast', modifier), + { + '--tw-backdrop-contrast': Array.isArray(value) + ? value.map((v) => `contrast(${v})`).join(' ') + : `contrast(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdropContrast')) + } +} diff --git a/src/plugins/backdropFilter.js b/src/plugins/backdropFilter.js new file mode 100644 index 000000000000..702e9f7e52f1 --- /dev/null +++ b/src/plugins/backdropFilter.js @@ -0,0 +1,32 @@ +export default function () { + return function ({ addUtilities, variants }) { + addUtilities( + { + '.backdrop-filter': { + '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', + 'backdrop-filter': [ + 'var(--tw-backdrop-blur)', + 'var(--tw-backdrop-brightness)', + 'var(--tw-backdrop-contrast)', + 'var(--tw-backdrop-grayscale)', + 'var(--tw-backdrop-hue-rotate)', + 'var(--tw-backdrop-invert)', + 'var(--tw-backdrop-opacity)', + 'var(--tw-backdrop-saturate)', + 'var(--tw-backdrop-sepia)', + ].join(' '), + }, + '.backdrop-filter-none': { 'backdrop-filter': 'none' }, + }, + variants('backdropFilter') + ) + } +} diff --git a/src/plugins/backdropGrayscale.js b/src/plugins/backdropGrayscale.js new file mode 100644 index 000000000000..a465843cbfa4 --- /dev/null +++ b/src/plugins/backdropGrayscale.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropGrayscale'), (value, modifier) => { + return [ + nameClass('backdrop-grayscale', modifier), + { + '--tw-backdrop-grayscale': Array.isArray(value) + ? value.map((v) => `grayscale(${v})`).join(' ') + : `grayscale(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdropGrayscale')) + } +} diff --git a/src/plugins/backdropHueRotate.js b/src/plugins/backdropHueRotate.js new file mode 100644 index 000000000000..c617e846c03e --- /dev/null +++ b/src/plugins/backdropHueRotate.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropHueRotate'), (value, modifier) => { + return [ + nameClass('backdrop-hue-rotate', modifier), + { + '--tw-backdrop-hue-rotate': Array.isArray(value) + ? value.map((v) => `hue-rotate(${v})`).join(' ') + : `hue-rotate(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdropHueRotate')) + } +} diff --git a/src/plugins/backdropInvert.js b/src/plugins/backdropInvert.js new file mode 100644 index 000000000000..3c31a7c724c6 --- /dev/null +++ b/src/plugins/backdropInvert.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropInvert'), (value, modifier) => { + return [ + nameClass('backdrop-invert', modifier), + { + '--tw-backdrop-invert': Array.isArray(value) + ? value.map((v) => `invert(${v})`).join(' ') + : `invert(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdropInvert')) + } +} diff --git a/src/plugins/backdropOpacity.js b/src/plugins/backdropOpacity.js new file mode 100644 index 000000000000..bcb57b940c38 --- /dev/null +++ b/src/plugins/backdropOpacity.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropOpacity'), (value, modifier) => { + return [ + nameClass('backdrop-opacity', modifier), + { + '--tw-backdrop-opacity': Array.isArray(value) + ? value.map((v) => `opacity(${v})`).join(' ') + : `opacity(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdropOpacity')) + } +} diff --git a/src/plugins/backdropSaturate.js b/src/plugins/backdropSaturate.js new file mode 100644 index 000000000000..4fc3f7d80744 --- /dev/null +++ b/src/plugins/backdropSaturate.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropSaturate'), (value, modifier) => { + return [ + nameClass('backdrop-saturate', modifier), + { + '--tw-backdrop-saturate': Array.isArray(value) + ? value.map((v) => `saturate(${v})`).join(' ') + : `saturate(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdropSaturate')) + } +} diff --git a/src/plugins/backdropSepia.js b/src/plugins/backdropSepia.js new file mode 100644 index 000000000000..312fcdd7f92b --- /dev/null +++ b/src/plugins/backdropSepia.js @@ -0,0 +1,21 @@ +import _ from 'lodash' +import nameClass from '../util/nameClass' + +export default function () { + return function ({ addUtilities, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('backdropSepia'), (value, modifier) => { + return [ + nameClass('backdrop-sepia', modifier), + { + '--tw-backdrop-sepia': Array.isArray(value) + ? value.map((v) => `sepia(${v})`).join(' ') + : `sepia(${value})`, + }, + ] + }) + ) + + addUtilities(utilities, variants('backdropSepia')) + } +} diff --git a/src/plugins/index.js b/src/plugins/index.js index 5fbc254a1e49..2386bea36d01 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -4,6 +4,16 @@ export { default as alignItems } from './alignItems' export { default as alignSelf } from './alignSelf' export { default as animation } from './animation' export { default as appearance } from './appearance' +export { default as backdropBlur } from './backdropBlur' +export { default as backdropBrightness } from './backdropBrightness' +export { default as backdropContrast } from './backdropContrast' +export { default as backdropFilter } from './backdropFilter' +export { default as backdropGrayscale } from './backdropGrayscale' +export { default as backdropHueRotate } from './backdropHueRotate' +export { default as backdropInvert } from './backdropInvert' +export { default as backdropOpacity } from './backdropOpacity' +export { default as backdropSaturate } from './backdropSaturate' +export { default as backdropSepia } from './backdropSepia' export { default as backgroundAttachment } from './backgroundAttachment' export { default as backgroundBlendMode } from './backgroundBlendMode' export { default as backgroundClip } from './backgroundClip' diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index ccb9471fc411..a717e05a7643 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -158,6 +158,7 @@ module.exports = { '2xl': '40px', '3xl': '64px', }, + backdropBlur: (theme) => theme('blur'), brightness: { 0: '0', 50: '.5', @@ -171,6 +172,7 @@ module.exports = { 150: '1.5', 200: '2', }, + backdropBrightness: (theme) => theme('brightness'), contrast: { 0: '0', 50: '.5', @@ -180,6 +182,7 @@ module.exports = { 150: '1.5', 200: '2', }, + backdropContrast: (theme) => theme('contrast'), dropShadow: { sm: '0 1px 1px rgba(0,0,0,0.05)', DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'], @@ -193,6 +196,7 @@ module.exports = { 0: '0', DEFAULT: '100%', }, + backdropGrayscale: (theme) => theme('grayscale'), hueRotate: { '-180': '-180deg', '-90': '-90deg', @@ -206,10 +210,13 @@ module.exports = { 90: '90deg', 180: '180deg', }, + backdropHueRotate: (theme) => theme('hueRotate'), invert: { 0: '0', DEFAULT: '100%', }, + backdropInvert: (theme) => theme('invert'), + backdropOpacity: (theme) => theme('opacity'), saturate: { 0: '0', 50: '.5', @@ -217,10 +224,12 @@ module.exports = { 150: '1.5', 200: '2', }, + backdropSaturate: (theme) => theme('saturate'), sepia: { 0: '0', DEFAULT: '100%', }, + backdropSepia: (theme) => theme('sepia'), flex: { 1: '1 1 0%', auto: '1 1 auto', @@ -812,6 +821,16 @@ module.exports = { alignSelf: ['responsive'], animation: ['responsive'], appearance: ['responsive'], + backdropBlur: ['responsive'], + backdropBrightness: ['responsive'], + backdropContrast: ['responsive'], + backdropDropShadow: ['responsive'], + backdropFilter: ['responsive'], + backdropGrayscale: ['responsive'], + backdropHueRotate: ['responsive'], + backdropInvert: ['responsive'], + backdropSaturate: ['responsive'], + backdropSepia: ['responsive'], backgroundAttachment: ['responsive'], backgroundBlendMode: ['responsive'], backgroundClip: ['responsive'], From 979ccebdafbf27c6263fce35c08b04465367012d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 17:36:16 -0400 Subject: [PATCH 14/17] Update tests --- .../fixtures/tailwind-output-flagged.css | 2343 ++++++++++++++++- .../fixtures/tailwind-output-important.css | 2343 ++++++++++++++++- .../tailwind-output-no-color-opacity.css | 2343 ++++++++++++++++- __tests__/fixtures/tailwind-output.css | 2343 ++++++++++++++++- jit/tests/basic-usage.test.css | 50 +- jit/tests/basic-usage.test.html | 3 + 6 files changed, 9414 insertions(+), 11 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index b1721a66fb34..1ca70890b814 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -29277,13 +29277,13 @@ video { --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); - --tw-drop-shadow: 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,/*!*/ /*!*/); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia); + --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 { @@ -29510,6 +29510,275 @@ video { --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; @@ -58206,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; @@ -86903,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; @@ -115600,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; @@ -144297,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; @@ -172994,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 e4cbb56bc2d0..5188f9c84587 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -29277,13 +29277,13 @@ video { --tw-blur: var(--tw-empty,/*!*/ /*!*/) !important; --tw-brightness: var(--tw-empty,/*!*/ /*!*/) !important; --tw-contrast: var(--tw-empty,/*!*/ /*!*/) !important; - --tw-drop-shadow: 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; - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) !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 { @@ -29510,6 +29510,275 @@ video { --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; @@ -58206,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; @@ -86903,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; @@ -115600,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; @@ -144297,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; @@ -172994,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 259e8caa7ba3..a62c4f80b620 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -26721,13 +26721,13 @@ video { --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); - --tw-drop-shadow: 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,/*!*/ /*!*/); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia); + --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 { @@ -26954,6 +26954,275 @@ video { --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; @@ -53094,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; @@ -79235,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; @@ -105376,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; @@ -131517,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; @@ -157658,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 b1721a66fb34..1ca70890b814 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -29277,13 +29277,13 @@ video { --tw-blur: var(--tw-empty,/*!*/ /*!*/); --tw-brightness: var(--tw-empty,/*!*/ /*!*/); --tw-contrast: var(--tw-empty,/*!*/ /*!*/); - --tw-drop-shadow: 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,/*!*/ /*!*/); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia); + --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 { @@ -29510,6 +29510,275 @@ video { --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; @@ -58206,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; @@ -86903,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; @@ -115600,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; @@ -144297,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; @@ -172994,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/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index 531525a7abd9..08ffa52e7ea9 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -637,14 +637,14 @@ --tw-blur: var(--tw-empty, /*!*/ /*!*/); --tw-brightness: var(--tw-empty, /*!*/ /*!*/); --tw-contrast: var(--tw-empty, /*!*/ /*!*/); - --tw-drop-shadow: 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, /*!*/ /*!*/); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-drop-shadow) - var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia); + --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; @@ -677,6 +677,50 @@ .sepia { --tw-sepia: sepia(100%); } +.backdrop-filter { + --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-filter-none { + backdrop-filter: none; +} +.backdrop-blur-lg { + --tw-backdrop-blur: blur(16px); +} +.backdrop-brightness-50 { + --tw-backdrop-brightness: brightness(0.5); +} +.backdrop-contrast-0 { + --tw-backdrop-contrast: contrast(0); +} +.backdrop-grayscale { + --tw-backdrop-grayscale: grayscale(100%); +} +.backdrop-hue-rotate-90 { + --tw-backdrop-hue-rotate: hue-rotate(90deg); +} +.backdrop-invert { + --tw-backdrop-invert: invert(100%); +} +.backdrop-opacity-75 { + --tw-backdrop-opacity: opacity(0.75); +} +.backdrop-saturate-150 { + --tw-backdrop-saturate: saturate(1.5); +} +.backdrop-sepia { + --tw-backdrop-sepia: sepia(100%); +} .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html index 58d5e096c53f..f0fea67aad08 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -111,6 +111,9 @@
+
From 566d4c4bc172ff12657ace5744238a8ff04a6f74 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 17:50:52 -0400 Subject: [PATCH 15/17] Transition filters by default --- __tests__/fixtures/tailwind-output-flagged.css | 12 ++++++------ __tests__/fixtures/tailwind-output-important.css | 12 ++++++------ .../fixtures/tailwind-output-no-color-opacity.css | 12 ++++++------ __tests__/fixtures/tailwind-output.css | 12 ++++++------ jit/tests/basic-usage.test.css | 2 +- jit/tests/kitchen-sink.test.css | 6 +++--- stubs/defaultConfig.stub.js | 3 ++- 7 files changed, 30 insertions(+), 29 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index 1ca70890b814..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; } @@ -58218,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; } @@ -87329,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; } @@ -116440,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; } @@ -145551,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; } @@ -174662,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; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 5188f9c84587..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; } @@ -58218,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; } @@ -87329,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; } @@ -116440,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; } @@ -145551,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; } @@ -174662,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; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index a62c4f80b620..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; } @@ -53106,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; } @@ -79661,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; } @@ -106216,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; } @@ -132771,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; } @@ -159326,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; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 1ca70890b814..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; } @@ -58218,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; } @@ -87329,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; } @@ -116440,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; } @@ -145551,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; } @@ -174662,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; } diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index 08ffa52e7ea9..e8cb3121d2fb 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -723,7 +723,7 @@ } .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, - transform; + transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } diff --git a/jit/tests/kitchen-sink.test.css b/jit/tests/kitchen-sink.test.css index a6defa901779..5c009ee38611 100644 --- a/jit/tests/kitchen-sink.test.css +++ b/jit/tests/kitchen-sink.test.css @@ -410,7 +410,7 @@ div { @media (prefers-reduced-motion: no-preference) { .motion-safe\:transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, - transform; + transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -421,7 +421,7 @@ div { @media (prefers-reduced-motion: reduce) { .motion-reduce\:transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, - transform; + transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -535,7 +535,7 @@ div { @media (prefers-reduced-motion: no-preference) { .md\:motion-safe\:hover\:transition:hover { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, - transform; + transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index a717e05a7643..aa05e672a67e 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -723,7 +723,8 @@ module.exports = { transitionProperty: { none: 'none', all: 'all', - DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', + DEFAULT: + 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter', colors: 'background-color, border-color, color, fill, stroke', opacity: 'opacity', shadow: 'box-shadow', From c750ca0d03554d6bac01da7149263db4b807efc7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 18:14:21 -0400 Subject: [PATCH 16/17] Alphabetize new config keys --- stubs/defaultConfig.stub.js | 106 ++++++++++++++++++------------------ 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index aa05e672a67e..7e7b8bb1392d 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -71,6 +71,15 @@ module.exports = { pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', bounce: 'bounce 1s infinite', }, + backdropBlur: (theme) => theme('blur'), + backdropBrightness: (theme) => theme('brightness'), + backdropContrast: (theme) => theme('contrast'), + backdropGrayscale: (theme) => theme('grayscale'), + backdropHueRotate: (theme) => theme('hueRotate'), + backdropInvert: (theme) => theme('invert'), + backdropOpacity: (theme) => theme('opacity'), + backdropSaturate: (theme) => theme('saturate'), + backdropSepia: (theme) => theme('sepia'), backgroundColor: (theme) => theme('colors'), backgroundImage: { none: 'none', @@ -100,6 +109,29 @@ module.exports = { cover: 'cover', contain: 'contain', }, + blur: { + 0: '0', + sm: '4px', + DEFAULT: '8px', + md: '12px', + lg: '16px', + xl: '24px', + '2xl': '40px', + '3xl': '64px', + }, + brightness: { + 0: '0', + 50: '.5', + 75: '.75', + 90: '.9', + 95: '.95', + 100: '1', + 105: '1.05', + 110: '1.1', + 125: '1.25', + 150: '1.5', + 200: '2', + }, borderColor: (theme) => ({ ...theme('colors'), DEFAULT: theme('colors.gray.200', 'currentColor'), @@ -133,6 +165,15 @@ module.exports = { inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', none: 'none', }, + contrast: { + 0: '0', + 50: '.5', + 75: '.75', + 100: '1', + 125: '1.25', + 150: '1.5', + 200: '2', + }, container: {}, cursor: { auto: 'auto', @@ -147,42 +188,6 @@ module.exports = { divideColor: (theme) => theme('borderColor'), divideOpacity: (theme) => theme('borderOpacity'), divideWidth: (theme) => theme('borderWidth'), - fill: { current: 'currentColor' }, - blur: { - 0: '0', - sm: '4px', - DEFAULT: '8px', - md: '12px', - lg: '16px', - xl: '24px', - '2xl': '40px', - '3xl': '64px', - }, - backdropBlur: (theme) => theme('blur'), - brightness: { - 0: '0', - 50: '.5', - 75: '.75', - 90: '.9', - 95: '.95', - 100: '1', - 105: '1.05', - 110: '1.1', - 125: '1.25', - 150: '1.5', - 200: '2', - }, - backdropBrightness: (theme) => theme('brightness'), - contrast: { - 0: '0', - 50: '.5', - 75: '.75', - 100: '1', - 125: '1.25', - 150: '1.5', - 200: '2', - }, - backdropContrast: (theme) => theme('contrast'), dropShadow: { sm: '0 1px 1px rgba(0,0,0,0.05)', DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'], @@ -192,11 +197,11 @@ module.exports = { '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)', none: '0 0 #0000', }, + fill: { current: 'currentColor' }, grayscale: { 0: '0', DEFAULT: '100%', }, - backdropGrayscale: (theme) => theme('grayscale'), hueRotate: { '-180': '-180deg', '-90': '-90deg', @@ -210,26 +215,10 @@ module.exports = { 90: '90deg', 180: '180deg', }, - backdropHueRotate: (theme) => theme('hueRotate'), invert: { 0: '0', DEFAULT: '100%', }, - backdropInvert: (theme) => theme('invert'), - backdropOpacity: (theme) => theme('opacity'), - saturate: { - 0: '0', - 50: '.5', - 100: '1', - 150: '1.5', - 200: '2', - }, - backdropSaturate: (theme) => theme('saturate'), - sepia: { - 0: '0', - DEFAULT: '100%', - }, - backdropSepia: (theme) => theme('sepia'), flex: { 1: '1 1 0%', auto: '1 1 auto', @@ -649,6 +638,13 @@ module.exports = { 90: '90deg', 180: '180deg', }, + saturate: { + 0: '0', + 50: '.5', + 100: '1', + 150: '1.5', + 200: '2', + }, scale: { 0: '0', 50: '.5', @@ -661,6 +657,10 @@ module.exports = { 125: '1.25', 150: '1.5', }, + sepia: { + 0: '0', + DEFAULT: '100%', + }, skew: { '-12': '-12deg', '-6': '-6deg', From f97a87ac7daeb33d409fbd295537f49ea8f4b1cb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 18:40:17 -0400 Subject: [PATCH 17/17] Optimize filter plugins for JIT + add arbitrary value support Except for drop-shadow, will add that once we can think it through a bit. --- jit/tests/arbitrary-values.test.css | 51 ++++++++++++++++++++++++++++ jit/tests/arbitrary-values.test.html | 17 ++++++++++ jit/tests/arbitrary-values.test.js | 1 + src/plugins/backdropBlur.js | 44 ++++++++++++++++-------- src/plugins/backdropBrightness.js | 46 +++++++++++++++++-------- src/plugins/backdropContrast.js | 46 +++++++++++++++++-------- src/plugins/backdropGrayscale.js | 46 +++++++++++++++++-------- src/plugins/backdropHueRotate.js | 46 +++++++++++++++++-------- src/plugins/backdropInvert.js | 46 +++++++++++++++++-------- src/plugins/backdropOpacity.js | 46 +++++++++++++++++-------- src/plugins/backdropSaturate.js | 46 +++++++++++++++++-------- src/plugins/backdropSepia.js | 46 +++++++++++++++++-------- src/plugins/blur.js | 42 +++++++++++++++-------- src/plugins/brightness.js | 44 ++++++++++++++++-------- src/plugins/contrast.js | 44 ++++++++++++++++-------- src/plugins/grayscale.js | 44 ++++++++++++++++-------- src/plugins/hueRotate.js | 44 ++++++++++++++++-------- src/plugins/invert.js | 44 ++++++++++++++++-------- src/plugins/saturate.js | 44 ++++++++++++++++-------- src/plugins/sepia.js | 44 ++++++++++++++++-------- 20 files changed, 593 insertions(+), 238 deletions(-) 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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/jit/tests/arbitrary-values.test.js b/jit/tests/arbitrary-values.test.js index bb3da9c65529..ad5683ce3c33 100644 --- a/jit/tests/arbitrary-values.test.js +++ b/jit/tests/arbitrary-values.test.js @@ -9,6 +9,7 @@ function run(input, config = {}) { test('arbitrary values', () => { let config = { + mode: 'jit', purge: [path.resolve(__dirname, './arbitrary-values.test.html')], corePlugins: { preflight: false }, theme: {}, diff --git a/src/plugins/backdropBlur.js b/src/plugins/backdropBlur.js index e251a7da2cc1..8872a9d3d292 100644 --- a/src/plugins/backdropBlur.js +++ b/src/plugins/backdropBlur.js @@ -1,21 +1,37 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropBlur'), (value, modifier) => { - return [ - nameClass('backdrop-blur', modifier), - { - '--tw-backdrop-blur': Array.isArray(value) - ? value.map((v) => `blur(${v})`).join(' ') - : `blur(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-blur': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropBlur) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-blur', modifier)]: { '--tw-backdrop-blur': `blur(${value})` }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropBlur'), (value, modifier) => { + return [ + nameClass('backdrop-blur', modifier), + { + '--tw-backdrop-blur': Array.isArray(value) + ? value.map((v) => `blur(${v})`).join(' ') + : `blur(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdopBlur')) + addUtilities(utilities, variants('backdopBlur')) + } } } diff --git a/src/plugins/backdropBrightness.js b/src/plugins/backdropBrightness.js index de5ce571ed07..e7e4cc792b91 100644 --- a/src/plugins/backdropBrightness.js +++ b/src/plugins/backdropBrightness.js @@ -1,21 +1,39 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropBrightness'), (value, modifier) => { - return [ - nameClass('backdrop-brightness', modifier), - { - '--tw-backdrop-brightness': Array.isArray(value) - ? value.map((v) => `brightness(${v})`).join(' ') - : `brightness(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-brightness': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropBrightness) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-brightness', modifier)]: { + '--tw-backdrop-brightness': `brightness(${value})`, + }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropBrightness'), (value, modifier) => { + return [ + nameClass('backdrop-brightness', modifier), + { + '--tw-backdrop-brightness': Array.isArray(value) + ? value.map((v) => `brightness(${v})`).join(' ') + : `brightness(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdropBrightness')) + addUtilities(utilities, variants('backdropBrightness')) + } } } diff --git a/src/plugins/backdropContrast.js b/src/plugins/backdropContrast.js index 078807df0cad..5eeb0cf0321e 100644 --- a/src/plugins/backdropContrast.js +++ b/src/plugins/backdropContrast.js @@ -1,21 +1,39 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropContrast'), (value, modifier) => { - return [ - nameClass('backdrop-contrast', modifier), - { - '--tw-backdrop-contrast': Array.isArray(value) - ? value.map((v) => `contrast(${v})`).join(' ') - : `contrast(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-contrast': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropContrast) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-contrast', modifier)]: { + '--tw-backdrop-contrast': `contrast(${value})`, + }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropContrast'), (value, modifier) => { + return [ + nameClass('backdrop-contrast', modifier), + { + '--tw-backdrop-contrast': Array.isArray(value) + ? value.map((v) => `contrast(${v})`).join(' ') + : `contrast(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdropContrast')) + addUtilities(utilities, variants('backdropContrast')) + } } } diff --git a/src/plugins/backdropGrayscale.js b/src/plugins/backdropGrayscale.js index a465843cbfa4..6efa696ba956 100644 --- a/src/plugins/backdropGrayscale.js +++ b/src/plugins/backdropGrayscale.js @@ -1,21 +1,39 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropGrayscale'), (value, modifier) => { - return [ - nameClass('backdrop-grayscale', modifier), - { - '--tw-backdrop-grayscale': Array.isArray(value) - ? value.map((v) => `grayscale(${v})`).join(' ') - : `grayscale(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-grayscale': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropGrayscale) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-grayscale', modifier)]: { + '--tw-backdrop-grayscale': `grayscale(${value})`, + }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropGrayscale'), (value, modifier) => { + return [ + nameClass('backdrop-grayscale', modifier), + { + '--tw-backdrop-grayscale': Array.isArray(value) + ? value.map((v) => `grayscale(${v})`).join(' ') + : `grayscale(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdropGrayscale')) + addUtilities(utilities, variants('backdropGrayscale')) + } } } diff --git a/src/plugins/backdropHueRotate.js b/src/plugins/backdropHueRotate.js index c617e846c03e..31cedb700c2a 100644 --- a/src/plugins/backdropHueRotate.js +++ b/src/plugins/backdropHueRotate.js @@ -1,21 +1,39 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropHueRotate'), (value, modifier) => { - return [ - nameClass('backdrop-hue-rotate', modifier), - { - '--tw-backdrop-hue-rotate': Array.isArray(value) - ? value.map((v) => `hue-rotate(${v})`).join(' ') - : `hue-rotate(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-hue-rotate': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropHueRotate) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-hue-rotate', modifier)]: { + '--tw-backdrop-hue-rotate': `hue-rotate(${value})`, + }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropHueRotate'), (value, modifier) => { + return [ + nameClass('backdrop-hue-rotate', modifier), + { + '--tw-backdrop-hue-rotate': Array.isArray(value) + ? value.map((v) => `hue-rotate(${v})`).join(' ') + : `hue-rotate(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdropHueRotate')) + addUtilities(utilities, variants('backdropHueRotate')) + } } } diff --git a/src/plugins/backdropInvert.js b/src/plugins/backdropInvert.js index 3c31a7c724c6..2055216a39b0 100644 --- a/src/plugins/backdropInvert.js +++ b/src/plugins/backdropInvert.js @@ -1,21 +1,39 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropInvert'), (value, modifier) => { - return [ - nameClass('backdrop-invert', modifier), - { - '--tw-backdrop-invert': Array.isArray(value) - ? value.map((v) => `invert(${v})`).join(' ') - : `invert(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-invert': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropInvert) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-invert', modifier)]: { + '--tw-backdrop-invert': `invert(${value})`, + }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropInvert'), (value, modifier) => { + return [ + nameClass('backdrop-invert', modifier), + { + '--tw-backdrop-invert': Array.isArray(value) + ? value.map((v) => `invert(${v})`).join(' ') + : `invert(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdropInvert')) + addUtilities(utilities, variants('backdropInvert')) + } } } diff --git a/src/plugins/backdropOpacity.js b/src/plugins/backdropOpacity.js index bcb57b940c38..0abdfaba6cc3 100644 --- a/src/plugins/backdropOpacity.js +++ b/src/plugins/backdropOpacity.js @@ -1,21 +1,39 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropOpacity'), (value, modifier) => { - return [ - nameClass('backdrop-opacity', modifier), - { - '--tw-backdrop-opacity': Array.isArray(value) - ? value.map((v) => `opacity(${v})`).join(' ') - : `opacity(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-opacity': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropOpacity) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-opacity', modifier)]: { + '--tw-backdrop-opacity': `opacity(${value})`, + }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropOpacity'), (value, modifier) => { + return [ + nameClass('backdrop-opacity', modifier), + { + '--tw-backdrop-opacity': Array.isArray(value) + ? value.map((v) => `opacity(${v})`).join(' ') + : `opacity(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdropOpacity')) + addUtilities(utilities, variants('backdropOpacity')) + } } } diff --git a/src/plugins/backdropSaturate.js b/src/plugins/backdropSaturate.js index 4fc3f7d80744..2f124f55d8fa 100644 --- a/src/plugins/backdropSaturate.js +++ b/src/plugins/backdropSaturate.js @@ -1,21 +1,39 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropSaturate'), (value, modifier) => { - return [ - nameClass('backdrop-saturate', modifier), - { - '--tw-backdrop-saturate': Array.isArray(value) - ? value.map((v) => `saturate(${v})`).join(' ') - : `saturate(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-saturate': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropSaturate) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-saturate', modifier)]: { + '--tw-backdrop-saturate': `saturate(${value})`, + }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropSaturate'), (value, modifier) => { + return [ + nameClass('backdrop-saturate', modifier), + { + '--tw-backdrop-saturate': Array.isArray(value) + ? value.map((v) => `saturate(${v})`).join(' ') + : `saturate(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdropSaturate')) + addUtilities(utilities, variants('backdropSaturate')) + } } } diff --git a/src/plugins/backdropSepia.js b/src/plugins/backdropSepia.js index 312fcdd7f92b..a1282365c3a4 100644 --- a/src/plugins/backdropSepia.js +++ b/src/plugins/backdropSepia.js @@ -1,21 +1,39 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('backdropSepia'), (value, modifier) => { - return [ - nameClass('backdrop-sepia', modifier), - { - '--tw-backdrop-sepia': Array.isArray(value) - ? value.map((v) => `sepia(${v})`).join(' ') - : `sepia(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'backdrop-sepia': (modifier, { theme }) => { + let value = asValue(modifier, theme.backdropSepia) + + if (value === undefined) { + return [] + } + + return { + [nameClass('backdrop-sepia', modifier)]: { + '--tw-backdrop-sepia': `sepia(${value})`, + }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('backdropSepia'), (value, modifier) => { + return [ + nameClass('backdrop-sepia', modifier), + { + '--tw-backdrop-sepia': Array.isArray(value) + ? value.map((v) => `sepia(${v})`).join(' ') + : `sepia(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('backdropSepia')) + addUtilities(utilities, variants('backdropSepia')) + } } } diff --git a/src/plugins/blur.js b/src/plugins/blur.js index f0a77e71d47a..4b293ae1d799 100644 --- a/src/plugins/blur.js +++ b/src/plugins/blur.js @@ -1,21 +1,35 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('blur'), (value, modifier) => { - return [ - nameClass('blur', modifier), - { - '--tw-blur': Array.isArray(value) - ? value.map((v) => `blur(${v})`).join(' ') - : `blur(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + blur: (modifier, { theme }) => { + let value = asValue(modifier, theme.blur) + + if (value === undefined) { + return [] + } + + return { [nameClass('blur', modifier)]: { '--tw-blur': `blur(${value})` } } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('blur'), (value, modifier) => { + return [ + nameClass('blur', modifier), + { + '--tw-blur': Array.isArray(value) + ? value.map((v) => `blur(${v})`).join(' ') + : `blur(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('blur')) + addUtilities(utilities, variants('blur')) + } } } diff --git a/src/plugins/brightness.js b/src/plugins/brightness.js index 25fb5a5b5488..0b632da99974 100644 --- a/src/plugins/brightness.js +++ b/src/plugins/brightness.js @@ -1,21 +1,37 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('brightness'), (value, modifier) => { - return [ - nameClass('brightness', modifier), - { - '--tw-brightness': Array.isArray(value) - ? value.map((v) => `brightness(${v})`).join(' ') - : `brightness(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + brightness: (modifier, { theme }) => { + let value = asValue(modifier, theme.brightness) + + if (value === undefined) { + return [] + } + + return { + [nameClass('brightness', modifier)]: { '--tw-brightness': `brightness(${value})` }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('brightness'), (value, modifier) => { + return [ + nameClass('brightness', modifier), + { + '--tw-brightness': Array.isArray(value) + ? value.map((v) => `brightness(${v})`).join(' ') + : `brightness(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('brightness')) + addUtilities(utilities, variants('brightness')) + } } } diff --git a/src/plugins/contrast.js b/src/plugins/contrast.js index 9d60283b9351..7593f98512c3 100644 --- a/src/plugins/contrast.js +++ b/src/plugins/contrast.js @@ -1,21 +1,37 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('contrast'), (value, modifier) => { - return [ - nameClass('contrast', modifier), - { - '--tw-contrast': Array.isArray(value) - ? value.map((v) => `contrast(${v})`).join(' ') - : `contrast(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + contrast: (modifier, { theme }) => { + let value = asValue(modifier, theme.contrast) + + if (value === undefined) { + return [] + } + + return { + [nameClass('contrast', modifier)]: { '--tw-contrast': `contrast(${value})` }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('contrast'), (value, modifier) => { + return [ + nameClass('contrast', modifier), + { + '--tw-contrast': Array.isArray(value) + ? value.map((v) => `contrast(${v})`).join(' ') + : `contrast(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('contrast')) + addUtilities(utilities, variants('contrast')) + } } } diff --git a/src/plugins/grayscale.js b/src/plugins/grayscale.js index 6b33b4ce2c0e..3250d6c4ac33 100644 --- a/src/plugins/grayscale.js +++ b/src/plugins/grayscale.js @@ -1,21 +1,37 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('grayscale'), (value, modifier) => { - return [ - nameClass('grayscale', modifier), - { - '--tw-grayscale': Array.isArray(value) - ? value.map((v) => `grayscale(${v})`).join(' ') - : `grayscale(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + grayscale: (modifier, { theme }) => { + let value = asValue(modifier, theme.grayscale) + + if (value === undefined) { + return [] + } + + return { + [nameClass('grayscale', modifier)]: { '--tw-grayscale': `grayscale(${value})` }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('grayscale'), (value, modifier) => { + return [ + nameClass('grayscale', modifier), + { + '--tw-grayscale': Array.isArray(value) + ? value.map((v) => `grayscale(${v})`).join(' ') + : `grayscale(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('grayscale')) + addUtilities(utilities, variants('grayscale')) + } } } diff --git a/src/plugins/hueRotate.js b/src/plugins/hueRotate.js index c86b0f82711c..8dff3f6bf3fb 100644 --- a/src/plugins/hueRotate.js +++ b/src/plugins/hueRotate.js @@ -1,21 +1,37 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('hueRotate'), (value, modifier) => { - return [ - nameClass('hue-rotate', modifier), - { - '--tw-hue-rotate': Array.isArray(value) - ? value.map((v) => `hue-rotate(${v})`).join(' ') - : `hue-rotate(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + 'hue-rotate': (modifier, { theme }) => { + let value = asValue(modifier, theme.hueRotate) + + if (value === undefined) { + return [] + } + + return { + [nameClass('hue-rotate', modifier)]: { '--tw-hue-rotate': `hue-rotate(${value})` }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('hueRotate'), (value, modifier) => { + return [ + nameClass('hue-rotate', modifier), + { + '--tw-hue-rotate': Array.isArray(value) + ? value.map((v) => `hue-rotate(${v})`).join(' ') + : `hue-rotate(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('hueRotate')) + addUtilities(utilities, variants('hueRotate')) + } } } diff --git a/src/plugins/invert.js b/src/plugins/invert.js index 63b1d36eae58..9a313fd1e9a5 100644 --- a/src/plugins/invert.js +++ b/src/plugins/invert.js @@ -1,21 +1,37 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('invert'), (value, modifier) => { - return [ - nameClass('invert', modifier), - { - '--tw-invert': Array.isArray(value) - ? value.map((v) => `invert(${v})`).join(' ') - : `invert(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + invert: (modifier, { theme }) => { + let value = asValue(modifier, theme.invert) + + if (value === undefined) { + return [] + } + + return { + [nameClass('invert', modifier)]: { '--tw-invert': `invert(${value})` }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('invert'), (value, modifier) => { + return [ + nameClass('invert', modifier), + { + '--tw-invert': Array.isArray(value) + ? value.map((v) => `invert(${v})`).join(' ') + : `invert(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('invert')) + addUtilities(utilities, variants('invert')) + } } } diff --git a/src/plugins/saturate.js b/src/plugins/saturate.js index 228800fe98d0..b1a2d8eb8913 100644 --- a/src/plugins/saturate.js +++ b/src/plugins/saturate.js @@ -1,21 +1,37 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('saturate'), (value, modifier) => { - return [ - nameClass('saturate', modifier), - { - '--tw-saturate': Array.isArray(value) - ? value.map((v) => `saturate(${v})`).join(' ') - : `saturate(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + saturate: (modifier, { theme }) => { + let value = asValue(modifier, theme.saturate) + + if (value === undefined) { + return [] + } + + return { + [nameClass('saturate', modifier)]: { '--tw-saturate': `saturate(${value})` }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('saturate'), (value, modifier) => { + return [ + nameClass('saturate', modifier), + { + '--tw-saturate': Array.isArray(value) + ? value.map((v) => `saturate(${v})`).join(' ') + : `saturate(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('saturate')) + addUtilities(utilities, variants('saturate')) + } } } diff --git a/src/plugins/sepia.js b/src/plugins/sepia.js index e38ffb2ac409..eb7446e5b107 100644 --- a/src/plugins/sepia.js +++ b/src/plugins/sepia.js @@ -1,21 +1,37 @@ import _ from 'lodash' -import nameClass from '../util/nameClass' +const { asValue, nameClass } = require('../../jit/pluginUtils') export default function () { - return function ({ addUtilities, theme, variants }) { - const utilities = _.fromPairs( - _.map(theme('sepia'), (value, modifier) => { - return [ - nameClass('sepia', modifier), - { - '--tw-sepia': Array.isArray(value) - ? value.map((v) => `sepia(${v})`).join(' ') - : `sepia(${value})`, - }, - ] + return function ({ config, matchUtilities, addUtilities, theme, variants }) { + if (config('mode') === 'jit') { + matchUtilities({ + sepia: (modifier, { theme }) => { + let value = asValue(modifier, theme.sepia) + + if (value === undefined) { + return [] + } + + return { + [nameClass('sepia', modifier)]: { '--tw-sepia': `sepia(${value})` }, + } + }, }) - ) + } else { + const utilities = _.fromPairs( + _.map(theme('sepia'), (value, modifier) => { + return [ + nameClass('sepia', modifier), + { + '--tw-sepia': Array.isArray(value) + ? value.map((v) => `sepia(${v})`).join(' ') + : `sepia(${value})`, + }, + ] + }) + ) - addUtilities(utilities, variants('sepia')) + addUtilities(utilities, variants('sepia')) + } } }