title: "Tailwind CSS Basics" description: "A beginner-friendly guide to understanding and using Tailwind CSS in your projects." date: "2025-06-11" author: "Jay Kishan" tags: ["Tailwind CSS", "CSS", "Frontend", "Utility-first", "Web Development"]

Tailwind CSS Basics 🚀

Tailwind CSS is a utility-first CSS framework that makes building modern, responsive UIs fast and easy. Instead of writing custom CSS, Tailwind provides low-level utility classes that you can compose directly in your HTML.

✨ Why Tailwind CSS?

No context switching: Stay in your HTML/JSX while styling.
Responsive utilities: Easy to manage breakpoints.
Customizable: Tailwind is highly configurable via tailwind.config.js.
Consistent UI: Encourages design consistency across the app.

🛠️ Installation

You can install Tailwind CSS via PostCSS or using frameworks like Next.js, Vite, or CRA.

Here’s a basic setup using npm:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will generate:

tailwind.config.js
postcss.config.js

⚙️ Configuration

Update your tailwind.config.js file to set the content paths:

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

🎨 Using Tailwind in Your CSS

In your main CSS file (e.g., index.css or globals.css), add:

@tailwind base;
@tailwind components;
@tailwind utilities;

💡 Example: A Simple Button

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

This single line styles your button with a blue background, hover effect, padding, and rounded corners — no custom CSS needed!

📱 Responsive Design

Tailwind uses mobile-first breakpoints:

<div class="text-sm md:text-lg lg:text-xl">
  Responsive Text
</div>

text-sm: default for small devices
md:text-lg: on medium screens and up
lg:text-xl: on large screens and up

🔁 Customization

You can customize colors, fonts, spacing, etc., inside tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#1DA1F2",
      },
    },
  },
}

Use it like:

<div class="bg-brand text-white p-4">Branded Box</div>