Tailwind CSS is a utility-first CSS framework that helps developers design modern, responsive, and customizable UIs quickly.
Instead of writing custom CSS for every style, Tailwind provides pre-built utility classes (like flex, pt-4, text-center, bg-blue-500) that you apply directly in your HTML/JSX.
It was created by Adam Wathan and first released in 2017.
Write styles directly in your HTML/JSX using small, single-purpose classes.
Example:
button class="bg-blue-500 text-white font-bold py-2 px-4 rounded"
Click Me
/button
Fully customizable via the tailwind.config.js file.
You can define your own colors, fonts, spacing, breakpoints, etc.
Built-in responsive classes like sm:, md:, lg:, xl:.
Example:
div class="text-base md:text-lg lg:text-xl"
Responsive text
/div
PurgeCSS integration: removes unused classes from production builds → tiny CSS bundle size.
JIT (Just-In-Time compiler): generates styles on-demand as you use them.
Speeds up development since no need to switch between CSS and HTML.
Works well with React, Next.js, Vue, Angular, Laravel, etc.
Rich plugin ecosystem (forms, typography, aspect-ratio, etc.).
⚡ Faster development (no writing repetitive CSS).
🎨 Highly customizable (design system support).
📱 Mobile-first & responsive-ready.
🧩 Reusable styles (consistent UI).
🗜️ Small production CSS bundle with PurgeCSS/JIT.
🌍 Large community & ecosystem.
Landing pages & marketing websites.
Dashboards & admin panels.
E-commerce websites.
SaaS applications.
Any project where speed + consistency matter.
Install via npm
# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
# Initialize Tailwind config
npx tailwindcss init -p
Configure tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"], // files to scan
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
Run the dev server → now Tailwind classes are available!