Tailwind CSS Tutorial

Tailwind CSS is a utility-first CSS framework that lets you build beautiful websites quickly without writing custom CSS. Instead of writing CSS files, you add classes directly to your HTML elements!

Download Starter Template Official Tailwind Docs

What you'll learn: HTML basics recap, Tailwind classes, layouts, components, and build a complete website!

HTML Tags - Quick Recap 📌

<div> - Division/Container

Used to group and organize content. It's a block-level element.

<div>This is a container</div>

Result:

This is a container

<h1> to <h6> - Headings

Heading tags from largest (h1) to smallest (h6).

<h1>Main Heading</h1>
<h2>Sub Heading</h2>

Result:

Main Heading

Sub Heading

<p> - Paragraph

Used for text content and paragraphs.

<p>This is a paragraph of text.</p>

Result:

This is a paragraph of text.

<a> - Anchor/Link

Creates clickable links to other pages or sections.

<a href="https://example.com">Click here</a>

Result:

Click here

<img> - Image

Displays images. It's a self-closing tag.

<img src="image.jpg" alt="Description">

Result:

<button> - Button

Creates clickable buttons.

<button>Click Me</button>

Result:

<nav> - Navigation

Contains navigation links for the website.

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Result:

<section> - Section

Defines a section in a document.

<section>
  <h2>Section Title</h2>
  <p>Content section with text.</p>
</section>

Result:

Section Title

Content section with text.

Form Tags - Quick Recap 📝

<form> - Form Container

Container for all form elements. It groups inputs together for submission.

<form action="/submit" method="POST">
  <!-- Form elements go here -->
</form>

Result:

<input> - Input Field

Creates various types of input fields. It's a self-closing tag.

<!-- Text input -->
<input type="text" placeholder="Enter text">

<!-- Email input -->
<input type="email" placeholder="Enter email">

<!-- Password input -->
<input type="password" placeholder="Enter password">

<!-- Number input -->
<input type="number" placeholder="Enter number">

Result:

Text input:

Email input:

Password input:

Number input:

<textarea> - Multi-line Text Input

Used for longer text input, like messages or comments.

<textarea rows="4" placeholder="Enter your message"></textarea>

Result:

<label> - Input Label

Defines a label for an input element. Improves accessibility and usability.

<label for="username">Username:</label>
<input type="text" id="username">

Result:

Username:

<select> - Dropdown Menu

Creates a dropdown list with multiple options.

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Result:

<option> - Dropdown Option

Defines an option in a dropdown menu.

<select>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

Result:

<button> - Form Button

Creates a clickable button inside a form.

<!-- Submit button -->
<button type="submit">Submit</button>

<!-- Reset button -->
<button type="reset">Reset</button>

<!-- Regular button -->
<button type="button">Click Me</button>

Result:

Checkbox & Radio Inputs

Special input types for selections.

<!-- Checkbox -->
<input type="checkbox" id="agree">
<label for="agree">I agree to terms</label>

<!-- Radio buttons -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>

Result:

I agree to terms

Gender:

Male

Female

💡 Form Tips:

• Always use label elements with inputs for better accessibility
• Use placeholder attribute to show hints
• The type attribute determines the input type
• Radio buttons with the same name allow only one selection

Getting Started with Tailwind CSS

<script src="https://cdn.tailwindcss.com"></script>

That's it! Now you can use all Tailwind classes in your HTML.

1. Colors in Tailwind CSS

Text Colors

Use text-{color}-{shade} to change text color:

<p class="text-blue-500">Blue text</p>
<p class="text-red-600">Red text</p>
<p class="text-green-700">Green text</p>

Result:

Blue text

Red text

Green text

Background Colors

Use bg-{color}-{shade} to change background color:

<div class="bg-blue-100 p-4">Light blue background</div>
<div class="bg-purple-200 p-4">Purple background</div>
<div class="bg-yellow-300 p-4">Yellow background</div>

Result:

Light blue background

Purple background

Yellow background

2. Typography (Text Styling)

Font Weight

<p class="font-light">Light weight</p>
<p class="font-normal">Normal weight</p>
<p class="font-semibold">Semibold weight</p>
<p class="font-bold">Bold weight</p>

Result:

Light weight

Normal weight

Semibold weight

Bold weight

Text Alignment

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>

Result:

Left aligned

Center aligned

Right aligned

3. Spacing (Padding & Margin)

Padding

Padding adds space inside an element:

<div class="p-4">Padding on all sides</div>
<div class="px-6">Padding left and right only</div>
<div class="py-8">Padding top and bottom only</div>
<div class="pt-4 pb-2">Different padding top and bottom</div>

Result:

Padding on all sides (p-4)

Padding left and right (px-6)

Padding top and bottom (py-8)

Margin

Margin adds space outside an element:

<div class="m-4">Margin on all sides</div>
<div class="mx-auto">Center element horizontally</div>
<div class="mt-8">Margin top only</div>

Common spacing values:

p-2 = 0.5rem (8px)
p-4 = 1rem (16px)
p-6 = 1.5rem (24px)
p-8 = 2rem (32px)

4. Borders & Rounded Corners

<div class="border">Simple border</div>
<div class="border-2">Thicker border</div>
<div class="border-4 border-blue-500">Blue thick border</div>
<div class="rounded">Small rounded corners</div>
<div class="rounded-lg">Large rounded corners</div>
<div class="rounded-full">Fully rounded (pill shape)</div>

Result:

Simple border

Thicker border

Blue thick border

Small rounded corners

Large rounded corners

Fully rounded

5. Shadows

<div class="shadow-sm">Small shadow</div>
<div class="shadow">Normal shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>

Result:

Small shadow

Normal shadow

Medium shadow

Large shadow

Extra large shadow

6. Hover Effects & Cursors

Hover Effects

Add interactive effects when users hover over elements using the hover: prefix:

<!-- Hover background color -->
<div class="bg-blue-500 hover:bg-blue-700 p-4 text-white">
  Hover to change background
</div>

<!-- Hover text color -->
<p class="text-gray-600 hover:text-blue-500">
  Hover to change text color
</p>

<!-- Hover scale (grow) -->
<button class="bg-green-500 text-white px-4 py-2 rounded hover:scale-110 transition">
  Hover to grow
</button>

<!-- Hover shadow -->
<div class="p-4 border rounded hover:shadow-lg transition">
  Hover for shadow
</div>

Result - Try hovering over these:

Hover to change background

Hover to change text color

Hover for shadow

Cursor Styles

Change the cursor appearance when hovering over elements:

<!-- Pointer cursor (hand) -->
<div class="cursor-pointer">Click me (pointer)</div>

<!-- Default cursor -->
<div class="cursor-default">Default cursor</div>

<!-- Wait cursor -->
<div class="cursor-wait">Wait cursor (loading)</div>

<!-- Not allowed cursor -->
<div class="cursor-not-allowed">Not allowed</div>

<!-- Text cursor -->
<div class="cursor-text">Text cursor (I-beam)</div>

<!-- Move cursor -->
<div class="cursor-move">Move cursor</div>

Result - Hover to see different cursors:

👆 Pointer cursor (hand)

👉 Default cursor

⏳ Wait cursor (loading)

🚫 Not allowed

📝 Text cursor (I-beam)

✋ Move cursor

Transition Effects

Make hover effects smooth with transitions:

<!-- Basic transition -->
<button class="bg-blue-500 hover:bg-blue-700 text-white px-6 py-2 rounded transition">
  Smooth Hover
</button>

<!-- Transition duration -->
<button class="bg-purple-500 hover:bg-purple-700 text-white px-6 py-2 rounded transition duration-500">
  Slow Hover (500ms)
</button>

<!-- Multiple hover effects -->
<button class="bg-red-500 hover:bg-red-700 hover:scale-105 text-white px-6 py-2 rounded transition">
  Color + Scale
</button>

Result:

💡 Hover & Cursor Tips:

• Always add transition class for smooth animations
• Use cursor-pointer on clickable elements
• Combine hover effects: hover:bg-blue-500 hover:scale-110
• Use duration-{time} to control animation speed (300, 500, 700ms)

7. Layouts - Flexbox

Flexbox helps arrange items in rows or columns easily!

Horizontal Layout (Row)

<div class="flex space-x-4">
  <div class="bg-blue-500 text-white p-4">Item 1</div>
  <div class="bg-green-500 text-white p-4">Item 2</div>
  <div class="bg-purple-500 text-white p-4">Item 3</div>
</div>

Result:

Item 1

Item 2

Item 3

Center Items

<div class="flex justify-center items-center h-32 bg-gray-200">
  <div class="bg-red-500 text-white p-4">Centered!</div>
</div>

Result:

Centered!

Space Between Items

<div class="flex justify-between bg-gray-200 p-4">
  <div class="bg-blue-500 text-white p-4">Left</div>
  <div class="bg-green-500 text-white p-4">Middle</div>
  <div class="bg-purple-500 text-white p-4">Right</div>
</div>

Result:

Left

Middle

Right

8. Layouts - Grid

Grid helps create responsive column layouts!

2 Column Grid

<div class="grid grid-cols-2 gap-4">
  <div class="bg-blue-500 text-white p-4">Column 1</div>
  <div class="bg-green-500 text-white p-4">Column 2</div>
</div>

Result:

Column 1

Column 2

3 Column Grid

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-500 text-white p-4">Card 1</div>
  <div class="bg-yellow-500 text-white p-4">Card 2</div>
  <div class="bg-purple-500 text-white p-4">Card 3</div>
</div>

Result:

Card 1

Card 2

Card 3

9. Component: Buttons

<!-- Primary Button -->
<button class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600">
  Primary Button
</button>

<!-- Success Button -->
<button class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600">
  Success Button
</button>

<!-- Danger Button -->
<button class="bg-red-500 text-white px-6 py-3 rounded-full hover:bg-red-600">
  Danger Button
</button>

<!-- Outline Button -->
<button class="border-2 border-purple-500 text-purple-500 px-6 py-2 rounded hover:bg-purple-500 hover:text-white">
  Outline Button
</button>

Result:

10. Component: Cards

<div class="bg-white shadow-lg rounded-lg p-6 max-w-sm">
  <h3 class="text-xl font-bold text-gray-800 mb-2">Card Title</h3>
  <p class="text-gray-600 mb-4">
    This is a simple card component with a title, description, and button.
  </p>
  <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
    Learn More
  </button>
</div>

Result:

Card Title

This is a simple card component with a title, description, and button.

11. Component: Navigation Bar

<nav class="bg-blue-600 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-xl font-bold">My Website</div>
    <div class="space-x-6">
      <a href="#" class="hover:text-blue-200">Home</a>
      <a href="#" class="hover:text-blue-200">About</a>
      <a href="#" class="hover:text-blue-200">Services</a>
      <a href="#" class="hover:text-blue-200">Contact</a>
    </div>
  </div>
</nav>

Result:

12. Component: Contact Form

<div class="bg-white shadow-md rounded-lg p-8 max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 mb-6">Contact Us</h2>
  
  <form>
    <!-- Name Input -->
    <div class="mb-4">
      <label class="block text-gray-700 font-semibold mb-2">Name</label>
      <input type="text" 
             class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" 
             placeholder="Enter your name">
    </div>

    <!-- Email Input -->
    <div class="mb-4">
      <label class="block text-gray-700 font-semibold mb-2">Email</label>
      <input type="email" 
             class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" 
             placeholder="Enter your email">
    </div>

    <!-- Message Textarea -->
    <div class="mb-4">
      <label class="block text-gray-700 font-semibold mb-2">Message</label>
      <textarea 
        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 h-32" 
        placeholder="Enter your message"></textarea>
    </div>

    <!-- Select Dropdown -->
    <div class="mb-6">
      <label class="block text-gray-700 font-semibold mb-2">Subject</label>
      <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
        <option>General Inquiry</option>
        <option>Support</option>
        <option>Feedback</option>
      </select>
    </div>

    <!-- Submit Button -->
    <button type="submit" 
            class="w-full bg-blue-500 text-white py-3 rounded-lg font-semibold hover:bg-blue-600 transition">
      Send Message
    </button>
  </form>
</div>

Result:

Contact Us

Name

Email

Message

Subject

💡 Form Styling Tips:

• Use w-full to make inputs full width
• focus:outline-none removes default outline
• focus:border-blue-500 adds color on focus
• block makes labels display above inputs

🎯 Complete Example Website

Here's a complete, simple website combining everything we learned:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-blue-600 text-white p-4 shadow-lg">
      <div class="container mx-auto flex justify-between items-center">
        <div class="text-2xl font-bold">My Portfolio</div>
        <div class="space-x-6">
          <a href="#home" class="hover:text-blue-200">Home</a>
          <a href="#about" class="hover:text-blue-200">About</a>
          <a href="#projects" class="hover:text-blue-200">Projects</a>
          <a href="#contact" class="hover:text-blue-200">Contact</a>
        </div>
      </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="bg-blue-500 text-white py-20">
      <div class="container mx-auto text-center">
        <h1 class="text-5xl font-bold mb-4">Welcome to My Portfolio</h1>
        <p class="text-xl mb-8">I'm a student learning web development</p>
        <button class="bg-white text-blue-500 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50">
          View My Work
        </button>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center text-gray-800 mb-8">About Me</h2>
        <div class="max-w-2xl mx-auto text-center">
          <p class="text-gray-600 text-lg mb-4">
            I'm a Class 11th student passionate about web development and design. I love creating
            beautiful and functional websites using modern technologies.
          </p>
        </div>
      </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="bg-gray-100 py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-4xl font-bold text-center text-gray-800 mb-12">My Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- Project Card 1 -->
          <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-2xl font-bold text-gray-800 mb-3">Project 1</h3>
            <p class="text-gray-600 mb-4">A simple website using HTML and Tailwind CSS.</p>
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
              View Project
            </button>
          </div>

          <!-- Project Card 2 -->
          <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-2xl font-bold text-gray-800 mb-3">Project 2</h3>
            <p class="text-gray-600 mb-4">A responsive landing page with modern design.</p>
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
              View Project
            </button>
          </div>

          <!-- Project Card 3 -->
          <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-2xl font-bold text-gray-800 mb-3">Project 3</h3>
            <p class="text-gray-600 mb-4">An interactive portfolio website.</p>
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
              View Project
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-16">
      <div class="container mx-auto px-4 max-w-2xl">
        <h2 class="text-4xl font-bold text-center text-gray-800 mb-8">Contact Me</h2>
        <div class="bg-white shadow-lg rounded-lg p-8">
          <p class="text-gray-600 text-center mb-6">
            Feel free to reach out to me for any inquiries or collaborations!
          </p>
          <div class="text-center">
            <p class="text-gray-700 mb-2">Email: student@example.com</p>
            <p class="text-gray-700">Phone: +91 12345 67890</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
      <div class="container mx-auto text-center">
        <p>&copy; 2024 My Portfolio. All rights reserved.</p>
      </div>
    </footer>
  </body>
</html>

Welcome to My Portfolio

I'm a student learning web development

About Me

I'm a Class 11th student passionate about web development and design. I love creating beautiful and functional websites using modern technologies.

My Projects

Project 1

A simple website using HTML and Tailwind CSS.

Project 2

A responsive landing page with modern design.

Project 3

An interactive portfolio website.

Contact Me

Feel free to reach out to me for any inquiries or collaborations!

Email: student@example.com

Phone: +91 12345 67890

📖 Quick Reference Guide

Colors

• text-{color}-{shade} - Text color
• bg-{color}-{shade} - Background color
• border-{color}-{shade} - Border color
• Colors: blue, red, green, purple, yellow, gray, pink, indigo
• Shades: 50, 100-900 (lighter to darker)

Spacing

• p-{size} - Padding all sides
• px-{size} - Padding left/right
• py-{size} - Padding top/bottom
• m-{size} - Margin (same pattern)
• Sizes: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24

Text

• text-{size} - xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl
• font-{weight} - thin, light, normal, medium, semibold, bold, extrabold, black
• text-{align} - left, center, right, justify
• uppercase - Transform to uppercase
• lowercase - Transform to lowercase
• capitalize - Capitalize first letter

Layout - Flexbox

• flex - Flexbox container
• flex-row - Horizontal direction
• flex-col - Vertical direction
• justify-{type} - start, center, end, between, around, evenly
• items-{type} - start, center, end, stretch
• flex-wrap - Allow wrapping
• gap-{size} - Space between items

Layout - Grid

• grid - Grid container
• grid-cols-{n} - Number of columns (1-12)
• grid-rows-{n} - Number of rows
• gap-{size} - Gap between cells
• col-span-{n} - Span across columns
• row-span-{n} - Span across rows

Borders & Corners

• border - Add border (1px)
• border-{size} - 0, 2, 4, 8
• border-{side} - t, r, b, l (top, right, bottom, left)
• rounded - Small corners (4px)
• rounded-{size} - sm, md, lg, xl, 2xl, 3xl, full
• rounded-{corner} - tl, tr, bl, br

Effects & Shadows

• shadow-{size} - sm, md, lg, xl, 2xl
• shadow-none - Remove shadow
• opacity-{value} - 0, 25, 50, 75, 100
• blur-{size} - sm, md, lg, xl
• brightness-{value} - 0-200

Width & Height

• w-{size} - Width (1-96, full, screen, auto)
• h-{size} - Height (1-96, full, screen, auto)
• min-w-{size} - Minimum width
• max-w-{size} - Maximum width (xs, sm, md, lg, xl, 2xl-7xl)
• min-h-{size} - Minimum height
• max-h-{size} - Maximum height

Hover & Interactive

• hover:bg-{color} - Hover background
• hover:text-{color} - Hover text color
• hover:scale-{value} - 95, 100, 105, 110
• cursor-pointer - Pointer cursor
• transition - Smooth transitions
• duration-{time} - 150, 200, 300, 500, 700, 1000

Display & Position

• block - Display block
• inline-block - Inline block
• hidden - Hide element
• relative - Relative position
• absolute - Absolute position
• fixed - Fixed position
• sticky - Sticky position

Overflow & Z-Index

• overflow-hidden - Hide overflow
• overflow-auto - Auto scrollbars
• overflow-scroll - Always scrollbars
• overflow-x-{type} - Horizontal overflow
• overflow-y-{type} - Vertical overflow
• z-{value} - 0, 10, 20, 30, 40, 50

🎯 Pro Tips for Using the Cheatsheet

🎨 Color Consistency

Stick to a color palette. Use shades 100-200 for backgrounds, 500-600 for primary colors, 700-900 for text.

🔄 Combine Classes

Tailwind works by combining utilities. Don't be afraid to use many classes on one element!

⚡ Performance

In production, use Tailwind's purge feature to remove unused classes and keep file sizes small.

💡 Tips for Success

🎯 Start Simple

Begin with basic elements like buttons and cards before moving to complex layouts.

🔍 Experiment

Try different class combinations to see what works best for your design.

📚 Use Documentation

Visit tailwindcss.com for complete documentation and more examples.

🎨 Be Creative

Use colors and spacing to create your unique style and personality.

🎉 Congratulations!

You've completed the Tailwind CSS tutorial! You now know how to create beautiful websites using Tailwind CSS.

What's Next?

✓ Practice by building your own portfolio website
✓ Try creating a landing page for a fictional product
✓ Experiment with responsive design (mobile-friendly layouts)
✓ Learn JavaScript to make your websites interactive
✓ Explore advanced Tailwind features like animations and transitions

Tailwind CSS Tutorial

HTML Tags - Quick Recap 📌

<div> - Division/Container

<h1> to <h6> - Headings

Main Heading

Sub Heading

<p> - Paragraph

<a> - Anchor/Link

<img> - Image

<button> - Button

<nav> - Navigation

<section> - Section

Section Title

Form Tags - Quick Recap 📝

<form> - Form Container

<input> - Input Field

<textarea> - Multi-line Text Input

<label> - Input Label

<select> - Dropdown Menu

<option> - Dropdown Option

<button> - Form Button

Checkbox & Radio Inputs

Getting Started with Tailwind CSS

1. Colors in Tailwind CSS

Text Colors

Background Colors

2. Typography (Text Styling)

Font Size

Font Weight

Text Alignment

3. Spacing (Padding & Margin)

Padding

Margin

4. Borders & Rounded Corners

5. Shadows

6. Hover Effects & Cursors

Hover Effects

Cursor Styles

Transition Effects

7. Layouts - Flexbox

Horizontal Layout (Row)

Center Items

Space Between Items

8. Layouts - Grid

2 Column Grid

3 Column Grid

9. Component: Buttons

10. Component: Cards

Card Title

11. Component: Navigation Bar

12. Component: Contact Form

Contact Us

🎯 Complete Example Website

Welcome to My Portfolio

About Me

My Projects

Project 1

Project 2

Project 3

Contact Me

📖 Quick Reference Guide

Colors

Spacing

Text

Layout - Flexbox

Layout - Grid

Borders & Corners

Effects & Shadows

Width & Height

Hover & Interactive

Display & Position

Overflow & Z-Index

🎯 Pro Tips for Using the Cheatsheet

💡 Tips for Success

🎯 Start Simple

🔍 Experiment

📚 Use Documentation

🎨 Be Creative

🎉 Congratulations!

What's Next?