Full Stack 22:402025-04-10
Tailwind CSS v4: What's New and How to Migrate
Tailwind v4 drops the config file, uses CSS variables natively, and has a new engine. Here's what changed, what stayed the same, and how to upgrade your existing projects.
Watch on YouTube
Click to open in YouTube
Video Notes & Code
Key takeaways, code snippets, and resources from this video.
CSS-Based Configuration
In v4, your tailwind config moves into CSS. No more tailwind.config.js — just @import "tailwindcss" and custom CSS variables.
css
@import "tailwindcss";
@theme {
--color-primary: #7C3AED;
--color-accent: #00D4FF;
--font-display: "Syne", sans-serif;
--font-sans: "DM Sans", sans-serif;
}New Utility Syntax
html
<!-- v3 (old) -->
<div class="bg-purple-700 text-white">
<!-- v4 — use CSS variable directly -->
<div class="bg-(--color-primary) text-white">
<!-- Arbitrary values still work -->
<div class="bg-[#7C3AED] mt-[calc(100vh-4rem)]">Found this useful?
Subscribe for weekly content on AI engineering, SaaS building, and full stack development.