Tailwind CSS Filter Order

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.

Installation

# 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

Usage

// 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]