Update vite docs install for Vite v6 + Tailwind v4

[PatMulligan]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Installing using VITE v6.0.11, it appears that postcss is no longer included in the vite installation

Also breaking changes related to Tailwind v4

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has mov ed to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/po stcss and update your PostCSS configuration.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[PatMulligan]

not sure if it's desirable to leave an option for a postcss.config.js or not! second commit removes it altogether

[PatMulligan]

ah, not quite fixed. it's yelling at me for not having postcss now, anyone know the correct way to incorporate these packages?

reference for tailwind v4
https://tailwindcss.com/docs/upgrade-guide

[PatMulligan]

okay, updated the package installation according to the Tailwind V4 docs

There are two things that would require updating related to the npx shadcn-vue@latest init :

1. the top should now be:

- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
...

2. And then it seems like the utility class border-border in the index.css is no longer recognized, will check the tailwind release notes

[vite] Internal server error: Cannot apply unknown utility class: border-border

edit: actually it doesn't seem to be correctly loading tailwindcss at all, utility classes aren't working nvm, seems fine

[almarzn]

And then it seems like the utility class border-border in the index.css is no longer recognized, will check the tailwind release notes

it is box-border now.

Anyway I'm trying to migrate as well, here are the things I also had to change:

• The color theme customization is different now. You have to use --color-background instead of --background, with hsl() and inside a @theme directive
• The primary etc color don't seem to be working on buttons, need to investigate

[PatMulligan]

cool thx!

according to tailwindlabs/tailwindcss#15778 (comment) , @apply should probably just be junked all together