Tailwind 4 Highlights
Tailwind CSS 4 brought significant changes to configuration and performance. Here's what mattered for us.
New Configuration Format
The tailwind.config.js file is now optional—CSS-based configuration is preferred:
/* globals.css */
@import "tailwindcss";
@theme {
--color-primary: #d2f800;
--color-surface: #080c14;
--font-sans: "Geist Sans", system-ui, sans-serif;
}Performance Improvements
Build times improved significantly. The new engine is more efficient at generating only the classes you use.
Migration Steps
- Update dependencies to v4
- Run the automatic migration tool
- Review and adjust custom configurations
- Test all components for styling issues
Breaking Changes We Hit
- Some color utilities changed syntax
- Plugin API updates required adjustments
- PostCSS configuration needed updates
Results
After migration, our CSS bundle is smaller and builds are faster. The CSS-based configuration is also easier to maintain.
