A First Look at Setting Up Tailwind CSS v4.0
Just three days ago, Tailwind CSS released v4.0 which introduces major changes to how we configure and manage design tokens with this framework.
As someone who uses Tailwind CSS extensively for both personal and professional work, I immediately migrated my personal website to test the new system.
In this post, I’ll share my experience migrating to TailwindCSS v4, focusing on the new @theme directive and how it simplifies design token management. You’ll see how the new approach eliminates the need for a separate JavaScript configuration file and makes working with CSS variables more straightforward.
Previous versions of Tailwind CSS have supported a clunky setup for integrating CSS variables. All config settings have to be kept in a JavaScript (JS) config file tailwind.config.mjs found in the project’s root directory.
One motivation for this approach is that it’s straightforward to implement light and dark themes. To implement a light/dark mode toggle button you could write some Javascript to toggle the values of the color CSS variables. I prefer this method over the recommended workflow which requires you to add more styles to components.
