tw not working with Goober/Gatsby

[wildpow]

Styles are showing up as object when using tw inside of a component. Reproduction here

import tw,{ styled } from 'twin.macro';

const Button = styled('button')`
/* background-color: green; */
font-size: 10em;
${tw`bg-green-900`};
`

System: OS: macOS 10.15.7 CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 15.13.0 - /usr/local/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 7.7.6 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 89.0.4389.114 Firefox: 86.0.1 Safari: 14.0.3 npmPackages: gatsby: ^3.2.1 => 3.2.1 gatsby-plugin-goober: ^2.4.0 => 2.4.0 npmGlobalPackages: gatsby-cli: 3.2.0

[kelvindecosta]

Hello!

I have also faced the same issue (see #327).

Ben suggests customizing .babelrc (see https://github.com/ben-rogerson/twin.macro/issues/327#issuecomment-776460552).

Hope this helps you out!

[wildpow]

I tried using the exact .babelrc from that comment you referenced and a combination of Twin's Preact/Goober example but no dice. Unfortunately, this is a bit over my head due to never having to mess with Gatsby's babel config before.

[ben-rogerson]

Looks like interpolation of css objects aren't supported in the Goober backticks.

Instead, you can add your classes to an array, object or interpolated function:

import React from "react"
import tw, { styled } from "twin.macro"

// ===

// Option a: Array
const Button = styled("button")([
  { backgroundColor: "green", fontSize: "10em" },
  tw`bg-red-900`,
])

// Option b: Object
const Button = styled("button")({
  backgroundColor: "green",
  fontSize: "10em",
  ...tw`bg-red-900`
})

// Option c: Interpolated function returning an object
const Button = styled("button")`
  background-color: green;
  font-size: 10em;
  ${() => tw`bg-red-900`}
`

// ===

export default function Home() {
  return (
    <div>
      <Button>Does work</Button>Hello world!
    </div>
  )
}

[wildpow]

So theme must use a different process because that works fine.

[wildpow]

I wanted to see how the twin/goober/preact example repo you built worked with tw but, it seems to be in the same boat.

Should there even be a goober preset? I guess it does work with theme and the global component so not completely incompatible with twin.macro.

[ben-rogerson]

Yeah, the theme values don't get replaced with an object, that's the difference between it and the tailwind classes.

I think it's well worth supporting Goober through a preset, although you currently can't interpolate tailwind styles into template literals, there are two workarounds above that make it very usable.

I took another look at the Goober docs and saw there's support for a function. So you can use a function to add styles within the template literals like this:

const Button = styled("button")`
  ${() => tw`bg-green-900`};
`

I've also posted an issue asking about possible support: https://github.com/cristianbote/goober/issues/285

[ben-rogerson]

Closing for now as this issue is due to lack of interpolation support in Goober.

Feel free to reopen if you think twin should have this as a polyfill feature.

[orsi]

This is still an issue for Gatsby as well:

[dharmveer97]

Hey @orsi can you please help me?

I'm using gatsby with twin macros and tailwind CSS.

I have an issue with the CSS render. I create pages in gastby.node.js so if I click on links CSS does not load. then I reload the page the all CSS renders perfectly.

I add full layout in gastby.browser.js

plz help

[orsi]

@dharmveer97

I never got it working, so I didn't solve the issue :P

[ben-rogerson]

I have an issue with the CSS render. I create pages in gastby.node.js so if I click on links CSS does not load. then I reload the page the all CSS renders perfectly.

Probably best to ask about this in Goober issues - Twin just does the tailwind > css object conversions. Make sure you're using their gatsby plugin too, and posting an example repository demonstrating the issue may help.