Tailwindcss-module: Extend Variants not working

[duthanhduoc]

Version

"@nuxtjs/tailwindcss": "^3.1.0",
"nuxt": "^2.14.6"

This is my tailwind.config.js file

module.exports = {
  variants: {
    extend: {
      display: ['hover', 'focus'],
    },
  },
}

I add variants but i can not see hover:block or hover:hidden in my classes. hover:block not working.
My tailwind.config.js file works because i use corePlugins, it works

 corePlugins: {
   // ...
  display: false,
}

[whardier]

I'm having a similar issue working with opacity: ['disabled'] not working as well. I'm doing the best I can to make sure that the contents of the application are scanned properly.

[whardier]

As it happens.. It turns out that TailwindCSS 1.9.5 is brought in via @nuxtjs/tailwindcss

I resolved my problem by reading the docs for V1 of TailwindCSS (no extend in variants.. just explicit preferences):

https://v1.tailwindcss.com/docs/pseudo-class-variants#disabled

[egistli]

@whardier Oh man, thanks for pointing out that the version of tailwindcss is still 1.x! Have been fighting this issue for nearly an hour.

[duthanhduoc]

As it happens.. It turns out that TailwindCSS 1.9.5 is brought in via @nuxtjs/tailwindcss

I resolved my problem by reading the docs for V1 of TailwindCSS (no extend in variants.. just explicit preferences):

https://v1.tailwindcss.com/docs/pseudo-class-variants#disabled

Yep, Thank you. I think this issue is about version. I'll wait for the next version

[whardier]

I'm not sure if this is much of a thing yet: https://github.com/nuxt-community/tailwindcss-module/tree/feat/tailwindcss2

The diff doesn't look horrible: https://github.com/nuxt-community/tailwindcss-module/compare/feat/tailwindcss2

[whardier]

Also: https://tailwindcss.nuxtjs.org/setup/#tailwind-2

[Atinux]

Could you confirm this bug is fixed when upgrading to Tailwind 2?