2.0.4 - Css filters, blend modes, deep config nesting and more

[ben-rogerson]

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 Disable short css #409
• Added opacityValue to color functions to better support colors added with css variables Color functions + Deeply nested classes #403
• Add unrestricted object nesting in tailwind.config.js Color functions + Deeply nested classes #403

Bugfixes

• Added autoprefixer as a dependency to avoid yarn v2 warnings Add autoprefixer dependency #401
• Fixed negative css variable display Fix negative css variables #411
• Improved class ordering in user plugins Reorder user plugins #400

That's all for now, cheers!

---

This discussion was created from the release Css filters, blend modes, deep config nesting and more.