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 🙌