Tailwind CSS Tutorial for Beginners: Install, Configure, and Build a Responsive Card

Overview

Tailwind CSS is a utility-first CSS framework that lets you build modern interfaces directly in your HTML. Unlike Bootstrap, it does not give you pre-built components. Instead, it gives you small utility classes such as px-4, bg-blue-500, and rounded-lg that you combine freely.

Why Use Tailwind CSS?

Feature	Tailwind CSS	Bootstrap
Styling approach	Utility-first, composable classes	Pre-built components
CSS output size	Usually under 10KB in production	Often 200KB+
Design freedom	Very high	Limited by framework style
Learning curve	Requires memorizing utilities, but patterns are consistent	Quick start, harder to customize deeply

Prerequisites

Node.js 18+ — Node.js official download
VS Code with the Tailwind CSS IntelliSense extension recommended

Step 1: Create a Project

mkdir my-tailwind-project
cd my-tailwind-project
npm init -y
npm install -D tailwindcss
npx tailwindcss init

Step 2: Configure Template Paths

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Add Tailwind Directives

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Build the CSS

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Core Utility Classes Cheat Sheet

Layout and Spacing

Category	Examples	Purpose
Flexbox	`flex` `items-center` `justify-between`	Flex layout and alignment
Grid	`grid` `grid-cols-3` `gap-4`	Grid layout
Padding	`p-4` `px-6` `py-2`	Inner spacing
Margin	`m-4` `mx-auto` `mt-8`	Outer spacing

Typography and Color

Class	Effect
`text-sm` / `text-lg` / `text-2xl`	Font size
`font-bold` / `font-semibold`	Font weight
`text-gray-600` / `text-blue-500`	Text color
`bg-white` / `bg-slate-100`	Background color
`rounded-lg` / `rounded-full`	Border radius
`shadow-md` / `shadow-lg`	Box shadow

Responsive Breakpoints

Prefix	Min-width	Typical device
`sm:`	640px	Large phone
`md:`	768px	Tablet
`lg:`	1024px	Desktop
`xl:`	1280px	Large desktop
`2xl:`	1536px	Extra-wide screens

Build a Responsive Card Component

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48"
           src="cover.jpg" alt="Cover" />
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        Technology
      </div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Tailwind CSS in practice
      </a>
      <p class="mt-2 text-slate-500">
        Build responsive interfaces quickly with utility-first CSS.
      </p>
    </div>
  </div>
</div>

FAQ

Why are there no class suggestions in VS Code?

Install the Tailwind CSS IntelliSense extension and make sure tailwind.config.js exists in the project root.

Why is my production CSS file large?

Tailwind removes unused classes automatically. Check that the content paths in tailwind.config.js are correct.