Support Tailwind CSS v2.1.0

[ben-rogerson]

Time to bring twin up-to-date with tailwindcss 2.1.0!

Update: I've finished adding all the classes, just gotta add a couple of patches to the list and I'll push all of this out in the next twin release.

Done

New blending mode utilities (3920)

".bg-blend-normal": { "background-blend-mode": "normal" },
".bg-blend-multiply": { "background-blend-mode": "multiply" },
".bg-blend-screen": { "background-blend-mode": "screen" },
".bg-blend-overlay": { "background-blend-mode": "overlay" },
".bg-blend-darken": { "background-blend-mode": "darken" },
".bg-blend-lighten": { "background-blend-mode": "lighten" },
".bg-blend-color-dodge": { "background-blend-mode": "color-dodge" },
".bg-blend-color-burn": { "background-blend-mode": "color-burn" },
".bg-blend-hard-light": { "background-blend-mode": "hard-light" },
".bg-blend-soft-light": { "background-blend-mode": "soft-light" },
".bg-blend-difference": { "background-blend-mode": "difference" },
".bg-blend-exclusion": { "background-blend-mode": "exclusion" },
".bg-blend-hue": { "background-blend-mode": "hue" },
".bg-blend-saturation": { "background-blend-mode": "saturation" },
".bg-blend-color": { "background-blend-mode": "color" },
".bg-blend-luminosity": { "background-blend-mode": "luminosity" },

New isolation utilities (3914)

'.isolate': { isolation: 'isolate' },
'.isolation-auto': { isolation: 'auto' },

New box-decoration-break utilities (3911)

'.decoration-slice': { 'box-decoration-break': 'slice' },
'.decoration-clone': { 'box-decoration-break': 'clone' },

New inline-table and list-item display utilities (3563, 3929)

'.inline-table': { display: 'inline-table'},
'.list-item': { display: 'list-item' }

New filter and backdrop-filter utilities (3923)

<div className="filter blur-md grayscale invert ..." />
// and 
<div className="backdrop-filter backdrop-blur backdrop-brightness-50 ..." />

---

Coming soon

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

[luknl]

Hey, thank you for being so quick on that!

I was wondering how twin was going to manage the new JIT feature.
You say that it's not required because there is already short css, right?

But maybe allowing the 2 ways would be nice?
It would also produce a smaller code, and more clear in some cases:
tw="mt-16 lg:mt-[240px]" might be more clear that it's the same property being changed then tw="mt-16 lg:margin-top-[240px]" ?

[ben-rogerson]

Check out this discussion for more info on the new JIT features in twin.

[smetzdev]

Hey @ben-rogerson, what would you think about the idea about a "polyfill" tailwind-plugin for new tailwind-features for the time between new tailwind-releases and the next twin.macro version containing these features?

[ben-rogerson]

Hey @ben-rogerson, what would you think about the idea about a "polyfill" tailwind-plugin for new tailwind-features for the time between new tailwind-releases and the next twin.macro version containing these features?

I'm certain this wouldn't be possible for every feature but I'm interested in hearing any ideas.

[ben-rogerson]

Update to [email protected] to use the new classes above 🎉