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

[sadeghbarati]

Could you please keep the TailwindCSS v3 installation too?

But make TailwindCSS v4 bolder (which already is, I meant to keep it on top)

[clementmas]

Does the style.css file have to be updated to support Tailwind v4 or is it not affected?

[titou26140]

Tailwind v4 is not yet supported as config is now write in css main file and not in a tailwind.config.js

[PatMulligan]

Does the style.css file have to be updated to support Tailwind v4 or is it not affected?

Using my css sheet, one of the things I had to do for proper functioning was to have the following up top (note this replaces the typical v3 import statements).

@import "tailwindcss";
@config "@/tailwind.config.js";
...

[simPod]

From what I understand they removed the config file.

[simPod]

nvm me https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file

[christianfullstack]

Makes it sense to wait or should i update now to Tailwind 4 for a Production Project ?

[andrerfcsantos]

Does the style.css file have to be updated to support Tailwind v4 or is it not affected?

Using my css sheet, one of the things I had to do for proper functioning was to have the following up top (note this replaces the typical v3 import statements).

@import "tailwindcss";
@config "@/tailwind.config.js";
...

What should tailwind.config.js contain in this case? I was under the impression that the tailwind config is something that should be optional now.

[ssiyad]

"JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4. If you still need to use a JavaScript config file, you can load it explicitly using the @config directive"

@andrerfcsantos https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file

[andrerfcsantos]

@ssiyad I get that, I'm just wondering what the contents of tailwind.config.js should be in this case. The same as the original instructions?

[ssiyad]

Nothing, right? Our config should go in a separate css file and be imported in tailwind.css I think.

[PatMulligan]

Makes it sense to wait or should i update now to Tailwind 4 for a Production Project ?

I wouldn't recommend anyone use this for production yet until shadcn is updated.

If you want you can use the upgrade guide script which does indeed get rid of tailwind.config.js and imports everything into the css file.

As a result, adding in shadcn components won't work because it looks for the config file.

[andrerfcsantos]

Nothing, right? Our config should go in a separate css file and be imported in tailwind.css I think.

I put the original config, which should be redundant and have no conflicts with other configs. But after that, I ran into #1090. After I tricked the script into believing there was a valid config, the styles on the page didn't seem correct.

In the end I just gave up and I'll wait for proper support for v4. I see there's already a PR lined up. Shadcn for React already supports Tailwind v4, so starting this project in React and not in Vue is also something I'm considering.