How to setup create-react-app with twin.macro and emotion
Tags: tailwindcss, twinmacro, react, emotion
Published: 2021-03-29 15:25:14

---
title: How to setup create-react-app with twin.macro and emotion
tags: tailwind, twinmacro, react, emotion
---

You know [tailwind](https://tailwindcss.com/) is a great tool, but you also may know that, in react world, it even gets better. We are talking about [twin.macro](https://github.com/ben-rogerson/twin.macro) here. It combines all the benefits of tailwind with all the benefits of the css-in-js approach.

twin.macro already provides really good documentation for setting it up with pretty much every technology out there, but I stumbled upon some minor issues with create-react-app/emotion which can be fixed with some pretty easy steps I am going to share with you.

## Follow the steps from the tutorial

You can pretty much follow all the steps from [this](https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion) tutorial, until [this point](https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion#add-the-jsx-pragma) where it tells you to extend JSX with a jsx-pragma in front of every twin.macro import. The documentation underneath says the following:

> You can automate the injection of the jsx pragma but you’ll need to use a package like rewire create react app to allow changes to the project .babelrc. Check the twin emotion + react docs for the babel config to use.

This is where the documentation leaves room for your own solution, so this will be what this blog post is about.

## Setting up CRACO

create-react-app doesn't allow you to edit its babel settings by default. To add our settings we have to hook in our babel-configuration somewhere. There were times where you had to eject from create-react-app for this, but luckily nowadays there are plenty of solutions.

One of these solutions is [CRACO](https://github.com/gsoft-inc/craco) which stands for "Create React App Configuration Override". Sounds exactly what we need here, so let's get into it.

- Install craco with `npm install @craco/craco` or `yarn add @craco/craco`
- Add a craco.config.js to your project root with the following content as a substitute for a .babelrc file:

```js
module.exports = {
  babel: {
    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",
        },
      ],
    ],
  },
}
```

- Change the scripts inside your package.json to the following:

```json
{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}
```

That's all if you followed the macro tutorial right, you should be able to start developing with `npm start`. Have fun!

## Resources

- [Tailwind Docs](https://tailwindcss.com/docs/guides/create-react-app)
- [Twin.Macro Docs](https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion)
- [Craco](https://github.com/gsoft-inc/craco)
- [Emotion CSS Prop](https://emotion.sh/docs/css-prop#jsx-pragma)