Introduction
Tailwind CSS 4 introduces a revolutionary shift: from JavaScript config to CSS-first configuration, with significant performance improvements.
CSS-first Configuration
No more tailwind.config.js. Configure directly in CSS:
@import "tailwindcss";
@theme {
--color-primary: #2563eb;
--color-dark: #1a1a2e;
--font-sans: "Inter", sans-serif;
}
Custom Theme Colors
Use them directly in class names:
<button class="bg-primary text-white">Click me</button>
Practical Tips
Gradient Backgrounds
<div class="bg-gradient-to-r from-blue-500 to-indigo-600">
Beautiful gradient
</div>
Card Hover Effects
<div class="rounded-2xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all">
Hover me
</div>
Conclusion
Tailwind CSS 4 is an excellent tool for modern frontend development with its CSS-first approach and improved performance.