How to setup create-react-app with twin.macro and emotion

You know tailwind is a great tool, but you also may know that, in react world, it even gets better. We are talking about 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 tutorial, until this point 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 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:

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:

{
  "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
• Twin.Macro Docs
• Craco
• Emotion CSS Prop