search

bradlc / babel-plugin-tailwind-components

Use Tailwind with any CSS-in-JS library
MIT License
332 stars 25 forks source link

"No theme provided" error #44

Open edbentinck opened 5 years ago

edbentinck commented 5 years ago

Package Versions:

├─ babel-plugin-styled-components@1.10.6
├─ styled-components@4.4.0
├─ tailwind.macro@1.0.0-alpha.10
├─ tailwindcss@1.1.2

I have just started a new project using babel-plugin-tailwind-components, and trying to use prop variables for dynamic component styling:

const Button = styled.button`
  ${({ pill }) => pill && tw`
    rounded-full
  `}

  ${tw`
    py-1
    px-3
    text-sm
    text-gray-700
    bg-gray-400
    hover:bg-gray-500
  `}
`

The snippet above produces a console error stating that the component ...references the 'theme' prop in its styles but no theme was provided via prop or <ThemeProvider>. I assume this is because at run-time dynamic styles are compiled to something along the lines of:

"marginBottom": _tailwindConfig.theme.margin["8"],

Static styles such as flex or text-center don't cause this error to be returned, since they aren't dependent on custom configurations.

Is there any way to avoid this error being produced?