Add TailwindCSS v4 as an option

[jscarle]

Please describe

Please add TailwindCSS as a an option!

Additional context

I know this has already been discussed as part of #246, but with the arrival of v4, it's even easier to integrate as an option now and should be reconsidered.

https://tailwindcss.com/docs/installation/using-vite

[btea]

It does seem very easy to introduce tailwind configuration now, perhaps relevant options can be added. cc @cexbrayat @haoqunjiang

[haoqunjiang]

I was uncertain how to test it since the CI matrix is already too large. However, Tailwind is gaining so much popularity that it has now surpassed sass + sass-embedded: https://npmtrends.com/sass-vs-sass-embedded-vs-tailwindcss.

Since the boilerplate for Tailwind is different from sass and less, and it is not simply a matter of installing an additional dependency, I believe we should provide this option.

[jscarle]

I would love to contribute. I understand the implementation requirements of Tailwind CSS, but I'm not 100% sure where this would need to be implemented in this package. Perhaps you could give me a starting point?

[haoqunjiang]

1. Create a tailwind folder under template/config/ and add the necessary template files.
2. To modify the vite.config.ts/js, you need to use a vite.config.js.data.mjs like the one in the jsx template, the data will be later fed into an EJS template.
3. In index.ts, add the tailwind prompt to the FEATURE_OPTIONS array, and a tailwind CLI flag to the FEATURE_FLAGS array.
4. Translate the prompt into different languages if necessary (feel free to use AI) and modify the files under locales/ accordingly.
5. Add a render('config/tailwind') somewhere near https://github.com/vuejs/create-vue/blob/a7f6f72242255f9848f1ff3e6d51cd42f7a00654/index.ts#L396
6. To test your modifications, run pnpm build and node bundle.js in the project root.

[jscarle]

@btea @cexbrayat @haoqunjiang

I'm by far no Node expert, so I put this together as best as I could. (Ask me anything in .NET instead. 😝) I realised that the code templates would heavily depend on the CSS, so I move the CSS files to the code templates. I didn't really see a better way to do that.

Aside from that, the PR should be mostly complete. It's likely missing tests and the playground stuff, but I wasn't sure where to add that.

https://github.com/vuejs/create-vue/pull/765

I did test out the templates and at first glance, everything seems to be output correctly.

[jscarle]

https://github.com/vuejs/create-vue/pull/245 could also be closed as a result of this PR.

[jscarle]

@haoqunjiang Should I abandon my PR?

[haoqunjiang]

@jscarle I didn't have much spare time recently. Could you please wait for a few more days (hopefully) or weeks? The PR looks good on the CLI side at first glance. But I still need time to fully review the example code. The layout of the current implementation is off on desktop. I'd like to have a closer look when I have more time.