https://github.com/joshdavenport/tailwindcss-filter-order

A plugin to customise the order Tailwind applies CSS filters
https://github.com/joshdavenport/tailwindcss-filter-order

Last synced: 5 days ago
JSON representation

A plugin to customise the order Tailwind applies CSS filters

• Host: GitHub
• URL: https://github.com/joshdavenport/tailwindcss-filter-order
• Owner: joshdavenport
• Created: 2023-04-14T15:37:19.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-20T00:44:24.000Z (over 1 year ago)
• Last Synced: 2024-10-31T17:11:49.400Z (20 days ago)
• Language: JavaScript
• Size: 22.5 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-tailwindcss - CSS Filter Order - Adds `filter-order` utilities for changing the order of filters in the generated CSS. (Plugins)

README

        
# 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

```js

// 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](https://tailwindcss.com/docs/brightness), [contrast](https://tailwindcss.com/docs/contrast), [sepia](https://tailwindcss.com/docs/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]

```