Tailwind CSS 4 Migration Cheatsheet

Tailwind CSS 4 is a major rewrite that changes how you configure and use the framework. The core engine has been rebuilt for performance, the configuration system has shifted from JavaScript to CSS, and several utility classes have been renamed or replaced. If you are migrating an existing Tailwind 3 project, this cheatsheet covers every breaking change, every new feature, and gives you a step-by-step migration path. The biggest conceptual shift is configuration. In Tailwind 3, you had a tailwind.config.js (or .ts) file where you defined your theme, plugins, and content paths. In Tailwind 4, configuration moves into your CSS file using the @theme directive.