addVariant isn't registering/working.

[xphstos]

Hello all,

I'm trying to create some custom variants but I have no luck making them work.
For example I have this variant:

plugin(({ addVariant }) => addVariant('not-first-child', '& > :where(:not(:first-child))'))

That doesn't register at all but the same as arbitrary value [&>:where(:not:(:first-child))]: works just fine.
So the issue it's not the "complex" selector.

I found the corePlugins.js from tailwind and tried to copy-paste some to see if those variants work..
I tried this:

plugin(({ addVariant }) => {
      addVariant('sel', ['& *::selection', '&::selection'])
    })

I just change the selection to sel and that didn't work.

I also tried the hocus example from documentation... also not working.

Am I missing something or doing something terribly wrong?
In order to recreate that just run a simple vite project then add TW as per documentation instructions.

TW Version: 3.4.1

[adamwathan]

Hey! Should work, here's a working demo of the example you shared:

https://play.tailwindcss.com/1lOnbY7dCr?file=config

Can you share a reproduction?

[xphstos]

You can check it here. https://stackblitz.com/edit/vitejs-vite-ciemkn?file=src%2FApp.tsx

[xphstos]

Do we have an update for that?
I just can see the reason why it's not working...

[adamwathan]

Your import is wrong, needs to be:

import plugin from 'tailwindcss/plugin';

Not:

import plugin from 'tailwindcss';

[xphstos]

How did I miss that!?
Thank you so much!