Introduction to Tailwind CSS

What is Tailwind CSS? 🌟

Tailwind CSS is a utility-first CSS framework that helps you build modern, responsive, and beautifully styled interfaces without writing traditional CSS. Instead of creating custom class names, Tailwind gives you hundreds of pre-built utility classes like p-4, text-center, bg-blue-500, and more.

>>“Tailwind gives you the freedom of CSS with the speed of utility classes.” — Every Tailwind Dev 💙

Why Use Tailwind CSS? 🚀

  • 📌 Faster development — no switching between HTML & CSS files
  • 🎨 Consistent design using utility classes
  • 🧩 Fully customizable via config file
  • 📱 Built-in responsive design system
  • ✨ Great for both beginners and advanced developers

How Tailwind Works 🧠

Tailwind gives you small, single-purpose CSS classes that you combine to create any design. Think of it as building blocks.

Example: Creating a styled button

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
  Click Me
</button>

Installing Tailwind CSS ⚙️

1. Using CDN (Quick Start) ⚡

Perfect for beginners or small demo projects.

Add this in your HTML <head>

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.0/dist/tailwind.min.css" rel="stylesheet" />

2. Installing via npm (Recommended for Projects) 📦

Install Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

Generate your tailwind.config.js:

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

Basic Utility Classes 🎯

UtilityDescription
p-4Padding of 1rem
text-centerCenter-align text
bg-red-500Red background color
rounded-lgLarge border radius
flex justify-betweenFlexbox layout with spaced items

Tailwind Folder Structure 🗂️

Common project structure

project/
├── src/
│   ├── index.html
│   ├── styles.css
│   └── components/
├── tailwind.config.js
├── package.json
└── postcss.config.js

Building Your First UI with Tailwind 🎨

Card Example

<div class="max-w-sm p-4 bg-white shadow-lg rounded-xl">
  <h2 class="text-xl font-bold mb-2">Tailwind Card</h2>
  <p class="text-gray-600">This is a simple card using Tailwind utilities.</p>
</div>

Note

💡 TIP: Combine utilities to build complex layouts without writing CSS!

Additional Resources 📚

>>“Tailwind doesn't limit you — it empowers you.” 🔥