TypeError: Cannot read property 'transparent' of undefined

[shantang96]

Hi,

I'm using Gatsby and if I use "bg-", it throws the following error:

const NuForm = styled(Form)`
    ${tw`bg-transparent uppercase inline-flex list-reset text-white`};
`

TypeError: Cannot read property 'transparent' of undefined

If I don't use bg everything works fine. And it's not just for a specific type of component, it happens as soon as I use "bg-" with any color.

[JaffParker]

I'll second this. I'm trying to use text-blue in a styled component like this:

import tw from 'tailwind.macro'
import styled from 'styled-components/macro'

const Div = styled.div`
  ${tw`text-blue`}
`

It throws an error:

App.tsx:1 Uncaught TypeError: Cannot read property 'blue' of undefined

[bradlc]

Are you using the Tailwind v1 config format by any chance?

[JaffParker]

@bradlc I did generate a full config provided by Tailwind and it worked. Sorry, I forgot to update the issue.

# Instead of this
$ npx tailwind init src/tailwind.js

# Do this
$ npx tailwind init src/tailwind.js --full

[mrob11]

I, too, am experiencing an issue like this. I've created a minimal webpack 4 setup to reproduce the problem. For what it's worth, I haven't been able to get this lib to work in any scenario that I've tried so far (Create React App, Next.JS, and this minimal webpack setup).

[bradlc]

@mike360 your config is in the Tailwind v1 format. tailwind.macro@latest does not support this. I recommend trying out tailwind.macro@next, which is detailed here: https://github.com/bradlc/babel-plugin-tailwind-components/releases/tag/v1.0.0-alpha.2

[mrob11]

Works now! Thank you @bradlc

[alanonthegit]

hey @bradlc I'm having the same issue (first time setting this up so I may be screwing up something), but I'm using a version of Tailwind that is before 1.0 (.0.7.4).

When I use my custom tailwind.js file, or even a default one, values like text-center p-2 rounded work, but bg-red gives out an error.

I'm on gatsby v2 and also have the "gatsby-plugin-styled-components" and "babel-plugin-styled-components.

Any pointers? Much appreciated. It seems like some tailwind classes work fine, while bg ones are not.

---

And just as a clarifying point, I can change my color class values on the tailwind config and this macro should still work, right?