Skip to content

2.0.0
Compare
Choose a tag to compare
@ben-rogerson ben-rogerson released this 29 Nov 03:46
· 551 commits to master since this release
2.0.0
1292057

twin v2

Twin version 2 is now out - I'll save the usual song and dance but I think it's worth at least a few tada's! 🎉 🎉 🎉

As it's a major release, I've had the chance to adjust some of the config defaults to make setup even easier.
Twin also now has full Tailwind v2 support which of course is the real gem here. Thanks to everyone that helped out by providing PR's.

Tailwind v2 gave us a bunch of changes and updates (some breaking), not to worry though - I've added some extra love to the suggestions to help you through the upgrade.

I won't be going over the Tailwind v2 changes here, as Adam has done a wonderful job of explaining the v2 updates at his blog so make sure you give that a read.

Here are the changes that were made to Twin:

Updated emotion preset #197

Emotion@11 was released 12th Nov 2020 and replaced @emotion/core with a new @emotion/react package. This has now been added as the default preset.
So if you've upgraded emotion to v11 recently and specified the new imports in the twin config then you can remove that and just roll with preset: 'emotion'. Check the PR notes if you're stuck on emotion <11.

Updated styled-components preset #207

The styled import has now changed to use the macro version. This syncs it up with the default css import that already used the macro import. This allows you to configure styled-components in your babel config now.

Renamed debugProp to dataTwProp and turned it on by default #210

The debugProp was renamed to distance itself from the other debug options and now reflects the attribute/prop that's added in your HTML during development. Twin helps you out with the naming of this item if you have the old name specified in your config.

New: Sibling variant #198

This variant gives you a way to target the next element, something I've done a bunch of times in regular 'ol css:

tw`sibling:block`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "~ *": {
    "display": "block"
  }
});

Fix: Maintain the ordering of the tw and css prop on jsx elements #208

Twin now checks which order you've added the props on an element so your css specificity is preserved:

// New behaviour
<div tw="bg-blue-100" css={[tw`bg-red-100`]}/> // bg will be red

// Old behaviour
<div tw="bg-blue-100" css={[tw`bg-red-100`]}/> // bg used to be blue

Improved theme import smarts #205

Just like Tailwind, the theme import now senses certain values if they are arrays and returns them as a string.
This rule only applies for the following config items:

'fontFamily', 'boxShadow', 'transitionProperty', 'transitionDuration', 'transitionDelay', 'transitionTimingFunction', 'backgroundImage', 'backgroundSize', 'backgroundColor', 'cursor', 'animation',

Make defined imports in your config override the preset #211

Previously if you defined imports in your twin config then they'd be overruled by the preset option. Now you can add a preset and customise just the import(s) you need.

Dark mode #142

This was actually available before this release, but it's worth mentioning again. You can use the dark: variant and also a special light: variant only available to Twin.

That's about covers it!
I wish everyone an amazing xmas and I look forward to making Twin an even better UI tool in 2021. Thank you all for your support!

Assets 2
Loading