Download this example using degit

npx degit https://github.com/ben-rogerson/twin.examples/react-emotion folder-name

From within the new folder, run npm install, then npm start to start the dev server.

• Getting started
  • Install the dependencies
  • Add the global styles
  • Add the twin config (optional)
  • Add the babel config
• Customization
• Next steps

React and Babel

npm install react react-dom @babel/core @emotion/babel-plugin-jsx-pragmatic babel-plugin-macros

Twin and Emotion

npm install twin.macro @emotion/react @emotion/styled

yarn add react react-dom @babel/core @emotion/babel-plugin-jsx-pragmatic babel-plugin-macros

yarn add twin.macro @emotion/react @emotion/styled

Twin uses the same preflight base styles as Tailwind to smooth over cross-browser inconsistencies.

The GlobalStyles import adds these base styles along with some @keyframes for the animation classes and some global css that makes the ring classes and box-shadows work.

You can add Twin’s GlobalStyles import in src/index.js:

// src/index.js
import React from 'react'
import { render } from 'react-dom'
import { GlobalStyles } from 'twin.macro'
import App from './App'

render(
  <>
    <GlobalStyles />
    <App />
  </>,
  document.getElementById('root'),
)

Twin’s config can be added in a couple of different files.

a) Either in babel-plugin-macros.config.js:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'emotion',
  },
}

b) Or in package.json:

// package.json
"babelMacros": {
  "twin": {
    "preset": "emotion"
  }
},

Note: The preset gets set to 'emotion' by default, so adding the config is only useful if you want to adjust Twin’s other options.

To use the tw and css props, emotion must first extend jsx with a jsx pragma.

The newest version looks like this and sits at the top of your files:

/** @jsxImportSource @emotion/react */

a) Auto inject the pragma:

You can avoid adding the pragma yourself with the following babel config:

// .babelrc
{
  "plugins": [
    "babel-plugin-macros",
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "export": "jsx",
        "import": "__cssprop",
        "module": "@emotion/react"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "__cssprop",
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

b) Or manually specify the jsx pragma in each file:

First add these babel plugins:

// .babelrc
{
  "plugins": [
    "babel-plugin-macros",
    ["@babel/plugin-transform-react-jsx", { "runtime": "automatic" }]
  ]
}

Then when styling with the tw or css prop, add the pragma at the top of your file. This also replaces the react import:

/** @jsxImportSource @emotion/react */
import tw from 'twin.macro'

const Input = () => <input tw="bg-black" />
// or
const Input = () => <input css={tw`bg-black`} />

Note: After build, if you’re seeing "process is not defined" then npm install and add "babel-plugin-transform-inline-environment-variables" to .babelrc

• View the config options →
• Customizing the tailwind config →

Learn how to work with twin

• The prop styling guide - A must-read guide to level up on prop styling
• The styled component guide - A must-read guide on getting productive with styled-components

Learn more about emotion

• Emotion’s css prop
• Emotion’s css import
• Emotion’s styled import