"No theme provided" error

[edbentinck]

Package Versions:

├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]

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?