Css filters, blend modes, deep config nesting and more
This release adds all the new classes from Tailwindcss v2.1.0 🎉
New classes
Filter and backdrop-filter utilities (3923) #402
tw`backdrop-invert-0`;
tw`backdrop-invert`;
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`;
tw`backdrop-saturate-0`;
tw`backdrop-saturate-50`;
tw`backdrop-saturate-100`;
tw`backdrop-saturate-150`;
tw`backdrop-saturate-200`;
tw`backdrop-sepia-0`;
tw`backdrop-sepia`;
tw`backdrop-grayscale-0`;
tw`backdrop-grayscale`;
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`;
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`;
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`;
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`;
tw`saturate-0`;
tw`saturate-50`;
tw`saturate-100`;
tw`saturate-150`;
tw`saturate-200`;
tw`invert-0`;
tw`invert`;
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`;
tw`grayscale-0`;
tw`grayscale`;
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`;
tw`contrast-0`;
tw`contrast-50`;
tw`contrast-75`;
tw`contrast-100`;
tw`contrast-125`;
tw`contrast-150`;
tw`contrast-200`;
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`;
tw`blur-0`;
tw`blur-sm`;
tw`blur`;
tw`blur-md`;
tw`blur-lg`;
tw`blur-xl`;
tw`blur-2xl`;
tw`blur-3xl`;
Blend mode utilities (3920)
tw`mix-blend-normal`;
tw`mix-blend-multiply`;
tw`mix-blend-screen`;
tw`mix-blend-overlay`;
tw`mix-blend-darken`;
tw`mix-blend-lighten`;
tw`mix-blend-color-dodge`;
tw`mix-blend-color-burn`;
tw`mix-blend-hard-light`;
tw`mix-blend-soft-light`;
tw`mix-blend-difference`;
tw`mix-blend-exclusion`;
tw`mix-blend-hue`;
tw`mix-blend-saturation`;
tw`mix-blend-color`;
tw`mix-blend-luminosity`;
tw`bg-blend-normal`;
tw`bg-blend-multiply`;
tw`bg-blend-screen`;
tw`bg-blend-overlay`;
tw`bg-blend-darken`;
tw`bg-blend-lighten`;
tw`bg-blend-color-dodge`;
tw`bg-blend-color-burn`;
tw`bg-blend-hard-light`;
tw`bg-blend-soft-light`;
tw`bg-blend-difference`;
tw`bg-blend-exclusion`;
tw`bg-blend-hue`;
tw`bg-blend-saturation`;
tw`bg-blend-color`;
tw`bg-blend-luminosity`;
Isolation utilities (3914)
tw`isolate`;
tw`isolation-auto`;
Box-decoration-break utilities (3911)
tw`decoration-slice`;
tw`decoration-clone`;
Inline-table and list-item display utilities (3563, 3929)
tw`inline-table`;
tw`list-item`;
Add ring defaults
ringOffsetWidth.DEFAULT
and ringOffsetColor.DEFAULT
are now added in the reset styles #405
Missing JIT features from this release
These tailwindcss JIT features will be rolled out in coming releases:
Arbitrary value support
There is no current support for custom tailwind class values - but it will be added to twin:
<button tw="bg-[#1da1f1]" /> // support coming soon
For now, use twin's short css feature that allows any css properties to be added:
<div tw="background-color[#1da1f1]" />
Built-in important modifier
Twin already supports a!
added at the end of the class.
I'm going to add support for the same syntax tailwind uses (!
at the front):
<div tw="font-bold !font-medium" /> // support coming soon
New features
- Added a config option to disable short css with
"disableShortCss": true
#409 - Added
opacityValue
to color functions to better support colors added with css variables #403 - Add unrestricted object nesting in tailwind.config.js #403
Bugfixes
- Added autoprefixer as a dependency to avoid yarn v2 warnings #401
- Fixed negative css variable display #411
- Improved class ordering in user plugins #400
That's all for now, cheers!