1.8.1

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

1.8.0

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!

1.7.0

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

1.6.3

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

1.6.2

• Added support for @tailwindcss/typography (#108)
  Check out the demo →
• Fixed plugin incompatibility issue with [email protected]+ affecting plugins like tailwind-custom-forms (#114)

1.6.1

• 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 #113

v1.6.0

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

New: Variant groups #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 #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 #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

1.5.1

• Fixed bug where an incorrect match was made on a child key #104

1.5.0

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 #97 and #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

1.4.1

• fixed kebab-case errors for box-border and box-content #27