tailwindcss-filters examples
Filter
To enable filters you have to add the `filter` utility.
<img class="filter filter-blur-5 ...">
<img class="filter filter-bright-50 ...">
<img class="filter filter-contrast-200 ...">
Backdrop
To enable backdrops you have to add the `backdrop` utility.
<img class="backdrop backdrop-blur-5 ...">
<img class="backdrop backdrop-bright-50 ...">
<img class="backdrop backdrop-contrast-200 ...">
Customizing
Below is the default configuration for this plugin. For more information on how to configure and customize it, refer to the official documentation of Tailwind CSS.
// tailwind.config.js
const blurScales = {
0: '0px',
1: '1px',
2: '2px',
5: '5px',
10: '10px',
20: '20px',
50: '50px',
100: '100px',
}
const percentScales = {
0: '0%',
25: '25%',
50: '50%',
75: '75%',
100: '100%',
125: '125%',
150: '150%',
175: '175%',
200: '200%',
250: '250%',
300: '300%',
400: '400%',
}
const hueScales = {
0: '0deg',
30: '30deg',
60: '60deg',
90: '90deg',
120: '120deg',
150: '150deg',
180: '180deg',
210: '210deg',
240: '240deg',
270: '270deg',
300: '300deg',
330: '330deg',
}
const shadowScales = {
none: '0 0 #0000',
sm: '0 2px 6px rgba(0, 0, 0, 0.5)',
DEFAULT: '0 2px 9px rgba(0, 0, 0, 0.5)',
md: '0 8px 18px rgba(0, 0, 0, 0.5)',
lg: '0 20px 45px rgba(0, 0, 0, 0.5)',
xl: '0 40px 75px rgba(0, 0, 0, 0.5)',
'2xl': '0 50px 150px rgba(0, 0, 0, 0.5)',
}
module.exports = {
theme: {
filter: (theme) => ({
blur: blurScales,
bright: percentScales,
contrast: percentScales,
shadow: shadowScales,
gray: theme('opacity'),
hue: hueScales,
invert: theme('opacity'),
opacity: theme('opacity'),
saturate: percentScales,
sepia: theme('opacity'),
}),
backdropFilter: (theme) => ({
blur: blurScales,
bright: percentScales,
contrast: percentScales,
shadow: shadowScales,
gray: theme('opacity'),
hue: hueScales,
invert: theme('opacity'),
opacity: theme('opacity'),
sepia: theme('opacity'),
saturate: percentScales,
}),
},
variants: {
filter: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
backdropFilter: [
'responsive',
'group-hover',
'focus-within',
'hover',
'focus',
],
},
}