Plugin doesn't seem to load under Vue3

[hognevevle]

• I'm submitting a ...
  [X] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  I'm unable to make this work under Vue3. Things like group-scope-hover:xxx simply do not work (no hover state is triggered). I tried copy-pasting your Usage example into my app (screenshot below). As you can see, the font color changes aren't being applied when hovering.

Any ideas? I haven't applied any custom config to tailwind.config.js - all I'm doing is the require("tailwindcss-nested-groups")

• Other information
  

[AndyOGo]

Hi, thanks for the issue.

I haven't applied any custom config to tailwind.config.js

You need a custom tailwind.config.js config file for any customization, like adding this plugin.
The official documentation helps you how to set it up properly.
https://tailwindcss.com/docs/plugins

[hognevevle]

Okay, I was a bit unclear there :) I do indeed have the tailwind.config.js file (I use some other Tailwind plugins already).

What I meant was that I haven't applied any custom values for groupLevel, groupScope or groupVariants.
(Although I did also try the values provided in the readme, to no avail)...

[AndyOGo]

Ah, then I misunderstood it.

I have a tailwind v2 playground here (also linked in the readme).
https://play.tailwindcss.com/2DKQEhVtqL

With this tailwind.config.js file:

onst colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        'light-blue': colors.lightBlue,
        cyan: colors.cyan,
      },
    },
  },
  variants: {},
  plugins: [require('tailwindcss-nested-groups')],
}

[AndyOGo]

@hognevevle Which version of tailwind are you using?
If you are still on V1 I recommend to upgrade.
Regarding this plugin, Tailwind V2 moved from PostCSS v7 to v8.

All the infos are here:
https://tailwindcss.com/docs/upgrading-to-v2

[AndyOGo]

@hognevevle Meanwhile I added tailwind as a peer dependency for this plugin.

A comparison of the sparing plugin API docs, does not reveal a breaking change.

• https://v1.tailwindcss.com/docs/plugins#app
• https://tailwindcss.com/docs/plugins

Though please keep in mind, that this plugin was written for V2.

[AndyOGo]

@hognevevle
So there are a few important differences between tailwind V1 and V2.
I updated the readme to link to relevant Tailwind docs and here is a working example in V1 and V2:
https://play.tailwindcss.com/LynJHjqDNU

1. The default enabled variants changed from V1 and V2 - you need to make sure that they are enabled properly
   • https://v1.tailwindcss.com/docs/configuring-variants
   • https://tailwindcss.com/docs/configuring-variants#overview
2. V2 plugins support ES Module flags for default exports, V1 does not - I fixed this
3. The plugin needs to work with the users version of Tailwind, so I added it as peerDependencies

[hognevevle]

Thank you so much for your efforts! After upgrading to your latest release, it is now working fine! 😃

I might have done something wrong, but AFAIK I'm using Tailwind V2, through the postcss7 compatibility build. That was the intention, at least. In my package.json I have "tailwindcss": "npm:@tailwindcss/postcss7-compat".

(Waiting for the next Vue3 patch which will provide support for PostCSS 8.)
EDIT: I just saw they released this last week! That means I can get rid of the compat build now..)

So I'm not sure exactly what the issue was, but all good now! Thanks again 🥇

[AndyOGo]

You are welcome. Glad it works now :)

Interesting. I never used the compatibility build, right, could also be that.