twin.macro

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

• Fix the broken 2xl: screen variant 😊

• 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

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!

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

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;.

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

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!

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 🙌

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!

• Added a missing justify-evenly class discovered by @sikloidz

This release brings twin up-to-date with Tailwindcss v1.7.0.

I'm pleased linear gradients have finally landed in core 🎉   and defining text letter-spacing per fontSize is now possible.

Take a look through the pull requests for more information and examples:

• Gradients
• Default letter-spacing per font-size
• Background-clip utilities + Contents display utility
• Divide border styles
• Define colors as closures
• Gap utility aliases

Enjoy!

This release brings twin up-to-date with the latest [email protected] release.
In record time too! Adam released v1.6.0 seven hours ago.

If you have tailwindcss sitting in your package.json dependencies then update it to [email protected] to use the new animate-xxx classes. This is so we can use the new @keyframes css which was added to the tailwindcss/dist/base.min.css file.

The keyframes were removed from the base.min.css, follow this issue for progress.

New: prefers-reduced-motion variants

This change adds two new variants:

• motion-reduced:
• motion-safe:

Official Tailwind PR notes

New: animate-xxx classes

This change adds four new animation classes:

• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

Official Tailwind PR notes

New: overscroll-behavior classes

This change adds nine new overscroll classes:

• overscroll-auto
• overscroll-contain
• overscroll-none
• overscroll-y-auto
• overscroll-y-contain
• overscroll-y-none
• overscroll-x-auto
• overscroll-x-contain
• overscroll-x-none

Official Tailwind PR notes

• Fixed a bug that only activated the autoCssProp when using the tw prop and not the css prop.

The autoCssProp automates the import of 'styled-components/macro' so you can use their css prop. Enable it if you're using styled-components with CRA or Vanilla React. If you're using Emotion, setting to true does nothing.

• Added support for @tailwindcss/typography (https://github.com/ben-rogerson/twin.macro/issues/108)
  Check out the demo →
• Fixed plugin incompatibility issue with [email protected]+ affecting plugins like tailwind-custom-forms (https://github.com/ben-rogerson/twin.macro/issues/114)

• Fixed a bug with debugProp: true where an error would be thrown when a tw and css prop were used on the same jsx element https://github.com/ben-rogerson/twin.macro/issues/113

I'm pretty stoked with the new DX features in this release, I hope you'll enjoy using them!

New: Variant groups https://github.com/ben-rogerson/twin.macro/pull/107

To avoid repeating variants among many classes, you can now group your variants within round brackets.
Grouping works with any of twins 40+ variants as well as responsive screen prefixes AND you can stack up as many variants as you want.
This makes it a truly powerful feature that I can't wait to use:

import 'twin.macro'

const interactionStyles = () => (
  <div tw="hover:(text-black underline) focus:(text-blue-500 underline)" />
)

const mediaStyles = () => <div tw="sm:(w-4 mt-3) lg:(w-8 mt-6)" />

const pseudoElementStyles = () => (
  <div tw="before:(content block w-10 h-10 bg-black)" />
)

const stackedVariants = () => <div tw="sm:hover:(bg-black text-white)" />

New: A theme import https://github.com/ben-rogerson/twin.macro/pull/106

You now have a theme import that pulls values straight from your tailwind.config.js.
This means you can avoid having to setup a theme provider to get at your raw theme values.
There's many uses for this import like setting root css variable, calc() values and keyframe animation values.
It can be used in all the ways the existing tw import can be used.

These examples show how it can be used within a css object:

import { theme, css } from 'twin.macro'

// css prop
const Input = () => <input css={css({ color: theme`colors.purple.500` })} />

// css prop alongside other styles:
const Input = () => <input css={[
  css({ color: theme('colors.black') }),
  tw`bg-black`,
]} />

// styled components:
const Input = tw.input`
  ${css({ color: theme('colors.black') })}
`

// styled components, alongside other styles:
const Input = tw.input(() => [
  css({ color: theme('colors.black') }),
  tw`bg-black`,
])

New: TypeScript support for tw component wrapping https://github.com/ben-rogerson/twin.macro/pull/110

You can now wrap components without popping TypeScript errors:

const PinkButton = tw(Button)`bg-black`

Documentation

• A huge update in all the twin installation docs
• Reordered variant prefixes in the config for easier searching

• Fixed bug where an incorrect match was made on a child key https://github.com/ben-rogerson/twin.macro/issues/104

More new variants

Seven new variants were added thanks to @phil-scott-78:

tw`first-of-type:flex` // :first-of-type {...}
tw`last-of-type:flex` // :last-of-type {...}
tw`odd-of-type:flex` // :nth-of-type(odd) {...}
tw`even-of-type:flex` // :nth-of-type(even) {...}
tw`not-first-of-type:flex` // :not(:first-of-type) {...}
tw`not-last-of-type:flex`  // :not(:last-of-type) {...}
tw`not-only-of-type:flex` // :not(:only-of-type) {...}

Check out the full list of variants →

Add plugin debug mode

By adding debugPlugins: true to your config you'll see a list of classes and the css your plugins are creating.
Visualising this data really helps iron out bugs when you're adding or editing plugins.
The feedback will only display in dev.

Improved plugin support

After finding I missed support for a bunch of selectors in plugins using addComponents I've now fixed the holes.
This tackles https://github.com/ben-rogerson/twin.macro/issues/97 and https://github.com/ben-rogerson/twin.macro/issues/96 - thanks @fvanwijk for raising the issues.

New Goober preset

Adding preset: 'goober' to your config will switch to Goober imports.
At the moment, you can only use it with goober@next.
This is a bit of a soft launch - I'll make a bigger deal of it when I release a guide on using Goober with Twin.

New sassy psuedo config option

Some css-in-js libraries like Goober support the sass way of adding pseudo selectors.
So &:hover vs :hover.

I've added a config option: sassyPseudo: true which will automatically add the ampersand.
This is turned on with the new preset: 'goober' config option above.

Other

• Plugin speed improvements

• fixed kebab-case errors for box-border and box-content https://github.com/ben-rogerson/twin.macro/issues/27