2.0.3

• Fix bug where transform and transform-gpu didn't use the correct CSS variables #221

2.0.2

• Fix the broken 2xl: screen variant 😊

2.0.1

• Fixed an error when a certain type of suggestion tries to show
• Fixed an incorrect match when the dash is left out of the last class part

2.0.0

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!

1.12.1

• Fixed an issue with css variables within user plugins #188

1.12.0

New: The theme import can now return objects (#169)

This update makes the theme import more useful for tasks like theming and creating breakpoint helpers:

const redThemeColors = Object.values(theme`colors.red`)
const breakpoints = theme`screens`

New: A config option to disable css color variables (#173)

Adding disableColorVariables: false to your twin config removes css variables from colors.
This makes it easier to work with complex animations or better support IE11 and react native.

New: Variants: not-disabled:, all:, all-child: (#178)

We can now style non-disabled form elements with not-disabled:xxx.
Stye all descendants with all:xxx (* { xxx }) or just the direct children with the all-child:xxx (> * { xxx }) variant.

New: Target svgs with the svg: variant and lock the stroke width with stroke-non-scaling (#178)

Target svgs from a parent container with the svg: variant and add vector-effect: non-scaling-stroke to svg descendants with the stroke-non-scaling class.

Fix: The GlobalStyles import now adds keyframes from your tailwind config (#172)

When you now use the GlobalStyles import, it will pull in the keyframes from your tailwind config so they're added once to your project.
GlobalStyles now acts more as a replacement for Tailwinds @tailwind base;.

1.11.1

• Fix bug causing a Maximum call stack size exceeded error when an invalid class is used #175

1.11.0

This release adds all the new classes now available in Tailwindcss v1.9.0:

Changes to the default outline colors #166

Two new outline colors have been added by default: outline-white and outline-black.
Outlines also now have some extra space from the element using outline-offset:

import tw from 'twin.macro'

tw`outline-none`

// ↓ ↓ ↓ ↓ ↓ ↓

// Old
({
  outline: 0,
})

// New
({
  outline: '2px solid transparent',
  outlineOffset: '2px',
})

New col and row span classes #163

tw`row-span-full`
tw`col-span-full`

New larger border-radius size classes #165

tw`rounded-xl`
tw`rounded-2xl`
tw`rounded-3xl`

tw`rounded-t-xl`
tw`rounded-r-xl`
tw`rounded-b-xl`
tw`rounded-l-xl`

tw`rounded-t-2xl`
tw`rounded-r-2xl`
tw`rounded-b-2xl`
tw`rounded-l-2xl`

tw`rounded-t-3xl`
tw`rounded-r-3xl`
tw`rounded-b-3xl`
tw`rounded-l-3xl`

tw`rounded-tl-lg`
tw`rounded-tr-lg`
tw`rounded-br-lg`
tw`rounded-bl-lg`

tw`rounded-tl-xl`
tw`rounded-tr-xl`
tw`rounded-br-xl`
tw`rounded-bl-xl`

tw`rounded-tl-2xl`
tw`rounded-tr-2xl`
tw`rounded-br-2xl`
tw`rounded-bl-2xl`

tw`rounded-tl-3xl`
tw`rounded-tr-3xl`
tw`rounded-br-3xl`
tw`rounded-bl-3xl`

New smaller rotate and skew values #164

tw`rotate-1`
tw`rotate-2`
tw`rotate-3`
tw`rotate-6`
tw`rotate-12`

tw`-rotate-1`
tw`-rotate-2`
tw`-rotate-3`
tw`-rotate-6`
tw`-rotate-12`

tw`skew-x-1`
tw`skew-x-2`
tw`-skew-x-1`
tw`-skew-x-2`

tw`skew-y-1`
tw`skew-y-2`
tw`-skew-y-1`
tw`-skew-y-2`

New auto-cols-xxx and auto-rows-xxx classes #166

tw`auto-cols-auto`
tw`auto-cols-min`
tw`auto-cols-max`
tw`auto-cols-fr`

tw`auto-rows-auto`
tw`auto-rows-min`
tw`auto-rows-max`
tw`auto-rows-fr`

Take a look at the PR's for more information about each change.

Enjoy!

1.10.0

A couple of new features for yall!

New: A new import called GlobalStyles

The GlobalStyles import does a couple of things when you add it to your jsx:

• It adds the missing keyframes from the animate-xxx classes
• It adds the Tailwind preflight base.min.css import

Typically, the GlobalStyles import is added once to your main App.js file but check out the setup docs in the main README.md for more info.

import { GlobalStyles } from 'twin.macro'

const App = () => (
  <>
    <GlobalStyles />
    {/* ... */}
  </>
)

// ↓↓↓ Roughly converts to this if you're using styled-components

import 'tailwindcss/dist/base.min.css'
import { createGlobalStyle } from 'styled-components'

const GlobalBase = createGlobalStyle`
  // animate-xxx keyframes
`
const App = () => (
  <>
    <GlobalBase />
    {/* ... */}
  </>

// ↓↓↓ and this in emotion

import { css } from "@emotion/core";
import { Global } from "@emotion/core";
import "tailwindcss/dist/base.min.css";

const GlobalStyles = () => <Global styles={css`
  // animate-xxx keyframes
`} />

const App = () => (
  <>
    <GlobalStyles />
    {/* ... */}
  </>
)

New: Improved debugProp reporting in your dev tools for the css prop

This feature improves the traceability in your dev tools back to the original classes you've added on jsx elements.
It's kinda like in Tailwind how you can see the original classes in the class attribute only you'll see them in an attribute named data-tw:

const propDemo = () => (
  <div
    tw="block mt-5"
    css={[
      tw`mt-3`,
    ]}
  />
)

// ↓ ↓ ↓ ↓ ↓ ↓

const propDemo = () => React.createElement('div', {
  "data-tw": "block mt-5 | mt-3",
  css: ...
});

If you've got debugProp: true in your twin config then you'll see the data-tw attribute in a non-production environment.

Other

• Twin now checks for tw styles being accidentally added in the style prop
• Improved performance with large documents by grouping some traversals

News

I've activated the new GitHub discussions feature on the twin repo.
It's a better place for discussions rather than in issues which are really only for reporting bugs now.

📣 Shoutouts

A sweet-sweet shout-out for my second GitHub sponsor @mutewinter from Postlight in NY, NY - thank you for helping out 🙌

1.9.0

Now that I'm back from a relaxing tropical holiday in Noosa Australia, I'm feeling refreshed and ready to start cranking out some new features.

This release brings twin up-to-date with Tailwind 1.8.8

New: 8x new font variant utilities

tw`ordinal`
tw`slashed-zero`
tw`lining-nums`
tw`oldstyle-nums`
tw`proportional-nums`
tw`tabular-nums`
tw`diagonal-fractions`
tw`stacked-fractions`
tw`normal-nums`

New: 28x grid alignment utilities

tw`justify-items-auto`
tw`justify-items-start`
tw`justify-items-end`
tw`justify-items-center`
tw`justify-items-stretch`

tw`justify-self-auto`
tw`justify-self-start`
tw`justify-self-end`
tw`justify-self-center`
tw`justify-self-stretch`

tw`place-content-center`
tw`place-content-start`
tw`place-content-end`
tw`place-content-between`
tw`place-content-around`
tw`place-content-evenly`
tw`place-content-stretch`

tw`place-items-auto`
tw`place-items-start`
tw`place-items-end`
tw`place-items-center`
tw`place-items-stretch`

tw`place-self-auto`
tw`place-self-start`
tw`place-self-end`
tw`place-self-center`
tw`place-self-stretch`

New: Dark and Light mode variants

tw`dark:bg-black`
tw`light:bg-white` // A twin extra

New: Twin examples Repo

I'm working on a single place to store all the Twin starters, there are some new ones added recently with Snowpack and Preact. There will be TypeScript versions of these shortly.

Patch: Add missing container features

📣 Shoutouts

A mega-shout-out goes to my first GitHub sponsor @DaneEveritt behind Pterodactyl Panel, an open-source game server management panel - thanks so much for your support!