Is it possible to chain pseudo classes using Tailwind CSS?

Question

I have an after: pseudo element I'm targetting using Tailwind CSS. I want to remove the background of the element when moving up to medium screens.

I know I should be able to do md:bg-none AND I can do after:bg-none, but can I do them together?

e.g. md:after:bg-none

Should this work? Or am I missing something?

Answer 1

Never mind! I realised I must have overwritten the Tailwind defaults somehow and bg-none wasn't working.

I added bg-none to the taiwind.config file and I was able to run:

md:after:bg-none

So for anyone else wandering (because there didn't seem to be any other answers elsewhere, it is perfectly possible to chain pseudo-classes together using Tailwind CSS.

Answer 2

Its definitely possible to chain but remember that only the full chain will work:

hover:bg-black //black background on hover

focus:bg-black //black background on focus

focus:hover:bg-black //black background on hovering already focused element

The latter class won't do anything on hover or focus alone.