Tailwind CSS Has a Free API You Should Know About

Tailwind CSS v4 brings a completely new architecture — a Rust-powered engine, CSS-first configuration, and a programmatic API for building custom tooling. Here's what's new. CSS-First Configuration (v4) No more tailwind.config.js — configure everything in CSS: /* app.css */ @import "tailwindcss" ; @theme { --color-brand : #3b82f6 ; --color-brand-dark : #1d4ed8 ; --font-display : "Inter" , sans-serif ; --breakpoint-3xl : 1920px ; --spacing-18 : 4.5rem ; --animate-slide-in : slide-in 0.3s ease-out ; } @keyframes slide-in { from { transform : translateX ( -100% ); } to { transform : translateX ( 0 ); } } /* Custom variant */ @variant hocus ( & : hover , & : focus ); /* Custom utility */ @utility text-shadow-sm { text-shadow : 0 1px 2px rgba ( 0 , 0 , 0 , 0.1 ); } <div class= "bg-brand text-white font-display p-18 animate-slide-in" > <button class= "hocus:bg-brand-dark text-shadow-sm" > Click me </button> </div> Plugin API Create reusable plugins: // my-plugin.js import plugin from " tailw