Twin.macro integration

Get Help and Help Others
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