group and group-hover are no longer working after updating to tailwindcss 1.0.1 and tailwind.macro 1.0.0-alpha 8

[shawnmmatthews]

Hey @bradlc

Thanks for all your work on this.

With tailwindcss 1.0.1 and tailwind.macro 1.0.0-alpha 8

I'm getting an error anytime I use group or group-hover.

Error: tailwind.macro: Couldn’t resolve Tailwind class name: group Learn more: https://www.npmjs.com/package/tailwind.macro

or if I remove group

Error: tailwind.macro: Couldn’t resolve Tailwind class name: group-hover Learn more: https://www.npmjs.com/package/tailwind.macro

I'm using your example over at - https://github.com/jlengstorf/gatsby-tailwind-demo/pull/8

Except, I have updated tailwind.config.js as follows

module.exports = {
  theme: {
    extend: {}
  },
  variants: {
    backgroundColor: ['group-hover', 'responsive', 'hover', 'focus']
    textColor: ['group-hover', 'responsive', 'hover', 'focus'],
  },
  plugins: []
}

This component however is yeilding errors on group and group-hover.

const HoverDiv = styled.div`
${tw`group bg-white hover:bg-blue-500`}
`
const HoveredP = styled.p`
${tw`text-gray-900 group-hover:text-white`}
`

export default function HoverButton() {
return (
        <>
            <HoverDiv>
                <HoveredP>New Project</HoveredP>
                <HoveredP>Create a new project from a variety of starting templates.</HoveredP>
            </HoverDiv>
       </>
)

Any thoughts? Is there anything else that I can provide that might help in debugging this?

[shawnmmatthews]

Ok so it does work with emotion, but for some reason not styled components. Is this expected behavior?

[bradlc]

Hey @shawnmmatthews

The group class should be used as a standard class name within your app. Here’s an example that I have confirmed works in create-react-app with emotion and styled-components:

import tw from 'tailwind.macro'

let Example = tw.div`group-hover:bg-blue-500`

function App() {
  return (
    <div className="group">
      <Example>Hello, world</Example>
    </div>
  )
}

Also, in case you didn’t know, all variants are availabe regardless of your Tailwind variants config.

[shawnmmatthews]

Thanks @bradlc my mistake!