Tailwind v4

TailwindCSS v4 is now available in Beta! This guide will help you migrate your existing TailwindCSS v4 project to HeroUI.

Migration Steps

1. Follow the official Tailwind v4 upgrade guide
2. Install the beta version of HeroUI

3. Configure HeroUI with the new Tailwind v4 syntax

Update CSS Import

Update PostCSS Configuration

Update Vite Configuration (Vite Projects Only)

Verification

After migration, verify that:

1. Your styles are being applied correctly
2. The build process completes without errors
3. 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