Css filter support

[ben-rogerson]

I'm really enjoying using these new filters from tailwind.
It's so easy to pile heaps of them on a single element - though you'd probably want to check the perf after that.

Usage

Add a filter to activate the filter then use the actual filter class(es) next to it (order doesn't matter):

tw.div`filter brightness-50`

;<div tw="filter brightness-50" />

Added

Filters:

// https://tailwindcss.com/docs/filter
tw`filter-none`
tw`filter`

// https://tailwindcss.com/docs/blur
tw`blur-0`
tw`blur-sm`
tw`blur`
tw`blur-md`
tw`blur-lg`
tw`blur-xl`
tw`blur-2xl`
tw`blur-3xl`

// https://tailwindcss.com/docs/brightness
tw`brightness-0`
tw`brightness-50`
tw`brightness-75`
tw`brightness-90`
tw`brightness-95`
tw`brightness-100`
tw`brightness-105`
tw`brightness-110`
tw`brightness-125`
tw`brightness-150`
tw`brightness-200`

// https://tailwindcss.com/docs/contrast
tw`contrast-0`
tw`contrast-50`
tw`contrast-75`
tw`contrast-100`
tw`contrast-125`
tw`contrast-150`
tw`contrast-200`

// https://tailwindcss.com/docs/drop-shadow
tw`drop-shadow-sm`
tw`drop-shadow`
tw`drop-shadow-md`
tw`drop-shadow-lg`
tw`drop-shadow-xl`
tw`drop-shadow-2xl`
tw`drop-shadow-none`

// https://tailwindcss.com/docs/grayscale
tw`grayscale-0`
tw`grayscale`

// https://tailwindcss.com/docs/hue-rotate
tw`-hue-rotate-180`
tw`-hue-rotate-90`
tw`-hue-rotate-60`
tw`-hue-rotate-30`
tw`-hue-rotate-15`
tw`hue-rotate-0`
tw`hue-rotate-15`
tw`hue-rotate-30`
tw`hue-rotate-60`
tw`hue-rotate-90`
tw`hue-rotate-180`

// https://tailwindcss.com/docs/invert
tw`invert-0`
tw`invert`

// https://tailwindcss.com/docs/saturate
tw`saturate-0`
tw`saturate-50`
tw`saturate-100`
tw`saturate-150`
tw`saturate-200`

// https://tailwindcss.com/docs/sepia
tw`sepia-0`
tw`sepia`

Backdrop filters:

// https://tailwindcss.com/docs/backdrop-filter
tw`backdrop-filter`
tw`backdrop-filter-none`

// https://tailwindcss.com/docs/backdrop-blur
tw`backdrop-blur-0`
tw`backdrop-blur-sm`
tw`backdrop-blur`
tw`backdrop-blur-md`
tw`backdrop-blur-lg`
tw`backdrop-blur-xl`
tw`backdrop-blur-2xl`
tw`backdrop-blur-3xl`

// https://tailwindcss.com/docs/backdrop-brightness
tw`backdrop-brightness-0`
tw`backdrop-brightness-50`
tw`backdrop-brightness-75`
tw`backdrop-brightness-90`
tw`backdrop-brightness-95`
tw`backdrop-brightness-100`
tw`backdrop-brightness-105`
tw`backdrop-brightness-110`
tw`backdrop-brightness-125`
tw`backdrop-brightness-150`
tw`backdrop-brightness-200`

// https://tailwindcss.com/docs/backdrop-contrast
tw`backdrop-contrast-0`
tw`backdrop-contrast-50`
tw`backdrop-contrast-75`
tw`backdrop-contrast-100`
tw`backdrop-contrast-125`
tw`backdrop-contrast-150`
tw`backdrop-contrast-200`

// https://tailwindcss.com/docs/backdrop-grayscale
tw`backdrop-grayscale-0`
tw`backdrop-grayscale`

// https://tailwindcss.com/docs/backdrop-hue-rotate
tw`-backdrop-hue-rotate-180`
tw`-backdrop-hue-rotate-90`
tw`-backdrop-hue-rotate-60`
tw`-backdrop-hue-rotate-30`
tw`-backdrop-hue-rotate-15`
tw`backdrop-hue-rotate-0`
tw`backdrop-hue-rotate-15`
tw`backdrop-hue-rotate-30`
tw`backdrop-hue-rotate-60`
tw`backdrop-hue-rotate-90`
tw`backdrop-hue-rotate-180`

// https://tailwindcss.com/docs/backdrop-invert
tw`backdrop-invert-0`
tw`backdrop-invert`

// https://tailwindcss.com/docs/backdrop-opacity
tw`backdrop-opacity-0`
tw`backdrop-opacity-5`
tw`backdrop-opacity-10`
tw`backdrop-opacity-20`
tw`backdrop-opacity-25`
tw`backdrop-opacity-30`
tw`backdrop-opacity-40`
tw`backdrop-opacity-50`
tw`backdrop-opacity-60`
tw`backdrop-opacity-70`
tw`backdrop-opacity-75`
tw`backdrop-opacity-80`
tw`backdrop-opacity-90`
tw`backdrop-opacity-95`
tw`backdrop-opacity-100`

// https://tailwindcss.com/docs/backdrop-saturate
tw`backdrop-saturate-0`
tw`backdrop-saturate-50`
tw`backdrop-saturate-100`
tw`backdrop-saturate-150`
tw`backdrop-saturate-200`

// https://tailwindcss.com/docs/backdrop-sepia
tw`backdrop-sepia-0`
tw`backdrop-sepia`

[YinHoChong]

Awesoooome !

[AnandChowdhary]

@ben-rogerson, what do you think of allowing arbitrary values, e.g., rotate-24 for a 24 degree rotation? I think just having rotate-{number} can be supported because of the macro nature, right?

[ben-rogerson]

@ben-rogerson, what do you think of allowing arbitrary values, e.g., rotate-24 for a 24 degree rotation? I think just having rotate-{number} can be supported because of the macro nature, right?

I'd like to add support for custom class values when twin gains support for tailwinds arbitrary values.

The classes for a rotation will be:

tw`transform rotate-[24deg]`

Until then, you can use twins short css feature to specify any unique values:

tw`transform[rotate(24deg)]`

[AnandChowdhary]

Thanks so much, @ben-rogerson! Follow-up: Is there any way to use background image URLs?

tw`background-image[url(https://example.com/hello.jpg)]`

[ben-rogerson]

@AnandChowdhary That snippet should add a background image, is it not working for you? Short css works with all css properties btw.

If it's not working, perhaps try adding some single quotes around the path:

tw`background-image[url('https://example.com/hello.jpg')]`

[plibither8]

Hi @ben-rogerson! Short css for background image does not seem to work. This is what I'm adding:

tw`background-image[url('https://example.com/hello.jpg')]`

The error I get during compilation:

error - ./src/components/Component.tsx
MacroError: /home/project/src/components/Component.tsx: 

✕ An ending bracket ']' wasn’t found for these classes:

background-image[url('https:
    at Array.forEach (<anonymous>)

[ben-rogerson]

@plibither8 looks like we need some escaping, try this:

tw`background-image[url(https:/\/knowpathology.com.au/app/uploads/2018/07/Happy-Test-Screen-01-825x510.png)]`

[plibither8]

@ben-rogerson thanks for the quick response! Tried exactly this and still doesn't seem to work - same error as before 🤔.

[ben-rogerson]

@ben-rogerson thanks for the quick response! Tried exactly this and still doesn't seem to work - same error as before 🤔.

Could you add a new issue with the code you're attempting, cheers!