Skip to content

Add TailwindCSS v4 as an option #741

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jscarle opened this issue Apr 26, 2025 · 4 comments
Open

Add TailwindCSS v4 as an option #741

jscarle opened this issue Apr 26, 2025 · 4 comments
Labels

Comments

@jscarle
Copy link

jscarle commented Apr 26, 2025

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

@jscarle jscarle added the enhancement New feature or request label Apr 26, 2025
@btea
Copy link
Collaborator

btea commented Apr 27, 2025

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

@haoqunjiang
Copy link
Member

haoqunjiang commented Jun 13, 2025

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
Copy link
Author

jscarle commented Jun 13, 2025

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
Copy link
Member

  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
    // Add configs.
  6. To test your modifications, run pnpm build and node bundle.js in the project root.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants