Tailwind V4 Upgrade 💾

[tnylea]

This PR includes the upgrade to Tailwind CSS v4.

You can find more details about the upgrade process here: https://www.shadcn-vue.com/docs/tailwind-v4.html. A few additional modifications have been made to the styles and sidebar to ensure everything looks good. I experienced a few layout issues that might have resulted from upgrading from ShadCN Vue 1 to v2 with the latest tailwind.

I reviewed the starter kit manually to ensure everything looks the same. Here's a quick screencast of these tests.

tailwind-v4.mp4

Everything seems to be working as it did before; however, this new version now includes the new Reka UI lib along with the latest version of Tailwind 👏

[ibrunotome]

Just a little comment about oklch colors and autoprefixer plugin.

[Bosphoramus]

Hi @tnylea

I made a similar PR where i also updated to shadcn/vue 2.0

#91

I think it would be cool if you checked the changelog i provided there and maybe find a way to "merge" both PRs

[Bosphoramus]

Yes, in vite.config.js

css: {
    postcss: {
        plugins: [tailwindcss, autoprefixer],
    },
},

can be removed when using the Tailwind Vite plugin installation

Also, i think some shadcn components got updates in version 2 and are still not updated in this PR, it can be done running this in the console:

npx shadcn-vue@latest add avatar breadcrumb button card checkbox collapsible dialog dropdown-menu input label navigation-menu separator sheet sidebar skeleton tooltip

Those are all the components we are using for the Vue starter kit

[Bosphoramus]

NPM dependencies autoprefixer and tailwindcss-animate can also be deleted, as i think autoprefixer is no longer required with the Tailwind Vite plugin installation

And shadcn/vue 2 now uses tw-animate-css instead of tailwindcss-animate as you can see here

When installed that also needs to be adjusted in app.css as you can se in the manual installation docs

@import "tw-animate-css";

instead of

@plugin 'tailwindcss-animate';

[JustSteveKing]

This is going to be 🔥

[tnylea]

Thanks @Bosphoramus for all the feedback.

It looks like many of the components have been updated since the first release of ShadCN Vue 2.0. I've updated them and re-checked that all the layouts look correct. I've also swapped out tailwind-animate with tw-animate and removed autoprefixer from the vite config.

Feel free to send over any additional feedback that you implemented in your version of the upgrade and I'll take a look into it.

Appreciate it!

[ronaldtveen]

Why was this outline-ring/50 not just added to the previous @layer base a few lines above?