@apply doesn't work with sm:, md:, hover:, etc.

[684efs3]

I am using the latest version of Nuxt and Tailwind 2.0.

When I use @apply with responsive classes like sm:pt-2 or md:pt-2 or even hover:text-gray-900, I get an error like: @apply cannot be used with .sm\:pt-2 because .sm\:pt-2 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .sm\:pt-2 exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree

I have to basically break out the responsive breakpoints and the hover.

I feel like I used to be able to use
.link {@apply text-gray-800 hover:text-gray-900}. Now, I have to have two classes:
.link {@apply text-gray-800} and .link:hover {@apply text-gray-900}

Is there any way to get around this? It's pretty annoying because I have to write more code and now the css classes for one item is in multiple areas.

[684efs3]

Nevermind, looks like this solves it: #2159

Weird, I used an old version of Nuxt and Tailwind and did not need to use the experimental module, but with the next Nuxt and Tailwind 2.0, I do.

I love Tailwind. Hope this gets incorporated into the default settings!

[bradlc]

Hey @684efs3, looks like you've got it working but for future reference: The @nuxtjs/tailwindcss module (which is used when selecting Tailwind CSS while creating a new Nuxt project) is using tailwindcss v1.9.6 which is why this doesn't work out-of-the-box.

We have a guide which explains how you can install the latest version within a Nuxt app 👍