Twin.macro integration

Get Help and Help Others
1

I’ve been having trouble integrating twin.macro (GitHub - ben-rogerson/twin.macro: 🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.) into Redwood. Has anyone had success?

2

There’s lots of Tailwind fans around here but I don’t know if anyone has tried using twin.macro yet. If you want to post your current configuration and any relevant error messages we can help you debug, though :smile:.

3

Hey @bickmark :wave: I just managed to get it working. The steps I took were:

  1. install the necessary libs (I’m going with styled-components in this example):
$ yarn workspace web add twin.macro tailwindcss styled-components
  1. configure web/package.json and web/babelrc.js 
// web/package.json

  ...
  "babelMacros": {
    "twin": {
      "preset": "styled-components"
    }
  }

// web/babelrc.js

module.exports = {
  extends: "../babel.config.js",
  // new line below
  plugins: ['macros'],
}
  1. make a <GlobalStyles /> component and use it in index.js:
// web/src/index.js

import GlobalStyles from './GlobalStyles'

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider>
      <GlobalStyles />
      <Routes />
    </RedwoodProvider>
  </FatalErrorBoundary>,
  document.getElementById('redwood-app')
)

where <GlobalStyles /> is

// web/src/GlobalStyles.js

import { GlobalStyles } from 'twin.macro'

export default function GlobalStylesComponent() {
  return <GlobalStyles />
}

Then you should be good!

6 Likes
4

Amazing. Thanks so much Dom.