Emotion + Tailwind — twin.macro

The current Nextjs project uses Tailwind css and we want to bring in styled component. Our team decided to use Emotion + Tailwind.

Emotion

A package similar to styled-component package but works well with Tailwind css

A few packages that we want to pay attention to

@emotion/core: main package

@emotion/react: integrate Emotion with React, it includes all the functionality of @emotion/core

@emotion/styled: get the styled to create styled component

@emotion/css: use Emotion with traditional CSS

It should be good enough to install @emotion/react and @emotion/styled

The reason to choose twin.macro over other packages

tailwind-styled-components vs tailwind.macro vs twin.macro | npm trends

Setup guild

package.json

dev dependency: babel-plugin-twin , twin.macro

add this block at the bottom of package.json

  "babelMacros": {
    "twin": {
      "preset": "emotion"
    }
  }

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": [
    "@emotion/babel-plugin",
    "babel-plugin-twin",
    "babel-plugin-macros"
  ]
}

Reference

Introduction