Twin.macro integration

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?

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:.

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'

  <FatalErrorBoundary page={FatalErrorPage}>
      <GlobalStyles />
      <Routes />

where <GlobalStyles /> is

// web/src/GlobalStyles.js

import { GlobalStyles } from 'twin.macro'

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

Then you should be good!


Amazing. Thanks so much Dom.