Order of variants doesn't appear to be respected

[kaweston]

I'm a relative newbie to CSS and definitely with Tailwind and am a bit confused regarding the precedence of variants as I understand it.

I've been following along with the screencasts and in the 'Hover, Style and Active Styles' screencast there is an explanation about adding extra variants in the tailwind.config.js file and that precedence increases left to right so you would want to put active after focus to ensure you see the colour change from the hover colour to the active colour on clicking.

tailwind.config.js
variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active']
  }

These utils were associated with the button in the screencast example: bg-indigo-500 hover:bg-indigo-400 md:hover:bg-green-400 active:bg-indigo-600. I noted that the presenter showed how the active colour had precedence over hover colour on a screen smaller than md. However when I resized the screen I noted that once the medium break point was reached the issue of the hover colour overriding the active colour was reintroduced.

In the generated CSS I note that all the classes seem to be grouped by the responsive variants and thus the md/hover md/active background colour variants are later than the default hover and active variants.

To honour the precedence specified in the tailwind.config.js I would have expected all the responsive variants for background colour to be first followed by the responsive hover combinations then responsive focus and lastly responsive active in the generated CSS; assuming they are the only legal combinations.

Is there a particular reason why this is not the case? I'd be very appreciative if someone can straighten me out on this.

[adamwathan]

The responsive variants are always grouped together in order for them to take precedence over non-responsive utilities, so they are the exception for sure.

You'll have to re-specify the active state in this case:

<div class="bg-indigo-500 hover:bg-indigo-400 active:bg-indigo-600 md:hover:bg-green-400 md:active:bg-indigo-600">...</div> 

Hope that's helpful!

[kaweston]

Hi Adam,
Thanks for confirming that the behaviour I am seeing is as designed.

Since I posed the question I did find the answer here https://tailwindcss.com/docs/configuring-variants/#the-responsive-variant so perhaps I should have looked a little harder first :-)

Could I suggest that mentioning this exception be added to the screencast at some point?

Lastly I have to say that overall your screencasts along with the accompanying github repository is just awesome and makes the learning experience a breeze!