A plugin to order your CSS filters applied by Tailwind CSS. Order of filters passed to the filter
property
can drastically change the final result. Without use of this plugin filters are applied in the same order every
time because Tailwind has a hardcoded order.
# npm
npm install --save-dev @joshdavenport/tailwindcss-filter-order
# yarn
yarn add --dev @joshdavenport/tailwindcss-filter-order
# pnpm
pnpm install --save-dev @joshdavenport/tailwindcss-filter-order
// tailwindcss.config.js
module.exports = {
theme: {
extend: {
filterOrder: {
'my-order': 'sepia invert brightness',
'another-order': 'brightness sepia hue-rotate invert'
},
},
},
plugins: [
require('@joshdavenport/tailwindcss-filter-order')
]
}
This generates the following new Tailwind utilities, for use in combination with the OOTB filter utilities (brightness, contrast, sepia, etc):
filter-order-my-order
filter-order-another-order
Alternatively, you can use an arbitrary value passed to the utility:
filter-order-[sepia_invert_brightness]