šØ What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that lets you rapidly build modern, responsive UIs directly in your HTML or JSX by using predefined utility classes.
ā Instead of writing custom CSS, you use classes like
p-4
,text-center
,bg-blue-500
, androunded-lg
.
ā” Why Use Tailwind CSS?
Benefit | Description |
---|---|
ā” Fast UI Development | Build components without writing custom CSS |
šÆ Utility-First | Write styles as classes in your markup |
šØ Design System Friendly | Easily customize theme, colors, spacing, etc. |
š§ Responsive by Default | Built-in mobile-first breakpoints |
š ļø Highly Customizable | Use tailwind.config.js to control everything |
š Large Ecosystem | Includes plugins, UI kits, and integrations |
Ā
š§± Example: Button Without Writing CSS
html
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg">
Click Me
</button>
ā Responsive, accessible, and styled ā all with utility classes.
š¦ Install Tailwind (Basic Setup with Vite)
bash
npm create vite@latest my-app
cd my-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Edit tailwind.config.js
:
js
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]
Add Tailwind to src/index.css
:
css
@tailwind base;
@tailwind components;
@tailwind utilities;
š Responsive Design Made Simple
html
<div class="text-sm md:text-base lg:text-lg">
Responsive Text
</div>
md:
applies styles at768px+
,lg:
at1024px+
.
šØ Customization Example
In tailwind.config.js
:
js
theme: {
extend: {
colors: {
primary: '#1e40af',
},
spacing: {
'72': '18rem',
},
},
}
Then use:
html
<div class="bg-primary p-72">Custom Colors & Spacing</div>
š§ Popular Utility Classes
Category | Examples |
---|---|
Spacing | p-4 , m-2 , px-6 , py-2 |
Flex/Grid | flex , justify-center , items-end , grid-cols-3 |
Text | text-xl , font-bold , text-gray-600 , uppercase |
Background | bg-red-500 , bg-gradient-to-r , bg-opacity-50 |
Borders/Radii | border , rounded-md , border-2 , border-gray-300 |
Effects | shadow-lg , transition , hover:bg-blue-600 |
Ā
š Tailwind Plugins You May Like
Plugin | Purpose |
---|---|
@tailwindcss/forms | Normalize and style form inputs |
@tailwindcss/typography | Better prose formatting (e.g., blog content) |
@tailwindcss/aspect-ratio | Set image/video aspect ratios easily |
daisyUI , Flowbite , ShadCN | Prebuilt UI components (Tailwind-based) |
Ā
š Tailwind CSS vs Bootstrap
Feature | Tailwind | Bootstrap |
---|---|---|
Approach | Utility-first | Component-first |
Customization | High | Moderate |
File Size | Smaller (w/ purge) | Larger |
Prebuilt Components | ā Minimal | ā Extensive |
Learning Curve | Medium | Easy (if familiar with classes) |
Ā
š§āš» Use Cases
Modern dashboards
Landing pages
SaaS UIs
E-commerce frontends
React, Vue, or Svelte apps
š Resources to Learn Tailwind CSS
š TailwindCSS Docs
š§° Tailwind UI ā Premium UI kit by Tailwind team
š§āšØ daisyUI ā Free component library on top of Tailwind