Update to Tailwind 4 and shadcn/vue 2

[Bosphoramus]

Hey! I fixed the animation on the Welcome page and updated everything to work with Tailwind CSS v3, right now its the version the Vue starter kit uses, because shadcn/vue does not support Tailwind 4 yet. I built a custom variant so that when you use something like starting:opacity-0, it now generates CSS that nests the rule inside an @starting-style block—just like the native at-rule is meant to work. This is why the initial animation was broken.

Please take a look and let me know what you think.

[tnylea]

Looks great @Bosphoramus. Hopefully, we can get Tailwind V4 out soon when ShadCN vue is compatible with v4, but for now, this makes the welcome page look identical 😊

Appreciate it!

[Plytas]

@tnylea I just happened to check https://github.com/unovue/shadcn-vue repo and it seems like they are tagging a 2.0 release right now 😄

[Bosphoramus]

Ohh thats super nice @tnylea!

If you want i could do a PR to update to shadcn/vue 2.0 (the version that just came out) and Tailwind 4

I can also adjust the border radius CSS var, they are different between the React and Vue starter kits

[taylorotwell]

Looks like we should just update this for TW4.

[Bosphoramus]

@taylorotwell I will do it in this PR!

[Bosphoramus]

@taylorotwell @tnylea

Done! Tested it and it seems to be working correctly!

• Updated to Tailwind CSS 4.1 (Latest)
• Installed Tailwind with the Vite plugin (recommended way) instead of PostCSS + Autoprefixer
• Used oklch color definitions
• Updated to shadcn/vue 2.0
• Swaped Radix-Vue with Reka UI (its newer version), its the library shadcn/vue 2.0 now uses under the hood
• Updated all starter kit components to their shadcn/vue 2.0 version
• Reverted previous changes to Welcome.vue (As it now works correctly with Tailwind 4)

Let me know if any adjustments are needed! 🚀