Tailwind CSS Has a Free API — Here's How to Build Beautiful UIs Without Writing CSS

Tailwind CSS is a utility-first CSS framework that lets you build modern UIs directly in your HTML. No custom CSS files, no naming conventions — just compose utility classes. Installation npm install tailwindcss @tailwindcss/vite Vite Setup // vite.config.ts import tailwindcss from " @tailwindcss/vite " ; export default defineConfig ({ plugins : [ tailwindcss ()] }); /* app.css */ @import "tailwindcss" ; Core Concepts <!-- Responsive card --> <div class= "max-w-sm rounded-xl shadow-lg overflow-hidden bg-white" > <img class= "w-full h-48 object-cover" src= "photo.jpg" alt= "" /> <div class= "p-6" > <h2 class= "text-xl font-bold text-gray-900" > Card Title </h2> <p class= "mt-2 text-gray-600" > Description text goes here. </p> <button class= "mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition" > Learn More </button> </div> </div> Responsive Design <!-- Mobile-first responsive grid --> <div class= "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 ga