Tailwind v4
TailwindCSS v4 is now available in Beta! This guide will help you migrate your existing TailwindCSS v4 project to HeroUI. The demonstration is available at https://beta.heroui.com/.
Migration Steps
- Follow the official Tailwind v4 upgrade guide
- Install the
betaversion of HeroUI
- Configure HeroUI with the new Tailwind v4 syntax
Update CSS Import
Without tailwind.config.js
Since Tailwind v4 favors a CSS-first approach, tailwind.config.js will not be required.
Create hero.ts file
Update your main css file
With tailwind.config.js
In Tailwind v4, tailwind.config.js is still supported for backward compatibility. If you still need to use it, you can load it explicity as below.
Update PostCSS Configuration
Update Vite Configuration (Vite Projects Only)
Verification
After migration, verify that:
- Your styles are being applied correctly
- The build process completes without errors
- HeroUI components render as expected
Make sure to check the Tailwind v4 documentation for any breaking changes that might affect your existing styles.
Need Help?
If you encounter any issues during migration, please:
- Join our Discord community
- Open an issue on our GitHub repository
