mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
a05b36996b
* Implement `filter` helper classes with all methods * Rename filter plugins/utilities, drop filter opacity, add drop shadow * Remove non-final default filter values * Working on default filter values, add basic JIT support * Working on blur values * New blur values (these are ~okay) * Match drop-shadow values to box-shadows by eye as best as possible * Update tests * Fix kitchen sink test * Add filter variants configuration * Move drop-shadow to end of filters list Co-Authored-By: Peter Neupauer <peter@neupauer.sk> * Add invert variants configuration * Add backdrop-filter utilities * Update tests * Transition filters by default * Alphabetize new config keys * Optimize filter plugins for JIT + add arbitrary value support Except for drop-shadow, will add that once we can think it through a bit. Co-authored-by: Nick Schmidt <nick@kreativgebiet.com> Co-authored-by: Peter Neupauer <peter@neupauer.sk>
33 lines
1.3 KiB
JavaScript
33 lines
1.3 KiB
JavaScript
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')
|
|
)
|
|
}
|
|
}
|