Tailwind theme is not compatible with Tailwind 3

[buddh4]

Version

• Vue version: 3

Description

After upgrading tailwind to v 3.0.1 the multiselect theme seems to break my vite build with the following error:

16:23:08 [vite] Internal server error: Cannot read properties of undefined (reading 'length')
      at posToNumber (E:\codebase\projects\x\web\node_modules\vite\dist\node\chunks\dep-3daf770c.js:4100:27)
      at generateCodeFrame (E:\codebase\projects\x\web\node_modules\vite\dist\node\chunks\dep-3daf770c.js:4125:13)
      at formatError (E:\codebase\projects\x\web\node_modules\vite\dist\node\chunks\dep-3daf770c.js:42637:42)
      at TransformContext.error (E:\codebase\projects\x\web\node_modules\vite\dist\node\chunks\dep-3daf770c.js:42583:19)
      at Object.transform (E:\codebase\projects\x\web\node_modules\vite\dist\node\chunks\dep-3daf770c.js:42806:25)
      at async doTransform (E:\codebase\projects\x\web\node_modules\vite\dist\node\chunks\dep-3daf770c.js:57478:29) (x3)

It seems to be related with the following group definition in the theme:

@apply flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group;

When removing the group from this rule it works fine. I've found the following related discussion: tailwindlabs/tailwindcss#2848

I assume group is not allowed in apply in v3 due to the problems described in the issue.

[adamberecz]

Thanks for reporting @buddh4 - fixed in 2.3.0