V4 & WordPress - Hover utility is not working but everything else is with a custom @theme

[ianhempsell]

I have a WP theme and I have this within my app.css which seems to work for everything TW, apart from the hover: utility is not being generated/applied on the frontend:

@import "tailwindcss/preflight.css";
@import "tailwindcss/utilities.css";

@theme {...}

I'm also using TW4 as postcss, if that helps.

Any help greatly appreciated.

[wongjn]

The hover variant includes @media (hover: hover) so if your device/browser combination does not pass this media query check, you would not see hover styles. You might be experiencing #16531. As a work-around, you could override the hover variant to remove the media query:

@custom-variant hover (&:hover);

[ianhempsell]

Thanks for the suggestion @wongjn, unfortunately this doesn't resolve my issue.

[wongjn]

consider providing a git repo that reproduces the unexpected behavior.

[ianhempsell]

I'm gonna struggle with a repo but this works and is a copy of my app.css file:
https://play.tailwindcss.com/W3wMeuLUnb

[wongjn]

Is it working in the Play for you?

[ianhempsell]

Yes, this works in play but not locally.

[ianhempsell]

I have managed to find my solution... I have gulp-clean-css within my pipeline... simply removing that has fixed the issue.

So I have just added the default TW4 installation for POSTCSS and all good - just in case anyone has this issue in the future.