DEV Community

Cover image for Tailwind CSS: A Complete Beginner-to-Intermediate Guide (With Practical Examples)
Farhad Rahimi Klie
Farhad Rahimi Klie

Posted on

Tailwind CSS: A Complete Beginner-to-Intermediate Guide (With Practical Examples)

#tailwindcss #css #coding #frontend

Tailwind CSS has become one of the most popular utility-first CSS frameworks in modern frontend development. Instead of writing custom CSS files, Tailwind enables you to style elements directly in your HTML using small, composable utility classes.

This article provides a full introduction to Tailwind CSS, how it works, how to use it correctly, and how to build real UI components with it. Whether you are a beginner or intermediate web developer, this guide will help you understand Tailwind deeply and start building with confidence.

What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes (like flex, pt-4, text-center, bg-gray-100, etc.) that help you build designs without leaving your HTML.

Unlike frameworks such as Bootstrap, Tailwind does not provide prebuilt components. Instead, it gives you the tools to quickly create custom designs.

Example: Utility Classes in Action 

<button class="bg-blue-600 text-white px-4 py-2 rounded">
  Click Me
</button>
Enter fullscreen mode Exit fullscreen mode

No CSS file. No custom class. Everything is controlled with Tailwind utilities.

Why Tailwind CSS?

1. Faster Development

You style directly in your markup, avoiding context switching between HTML and CSS.

2. Highly Customizable

Tailwind uses a single configuration file—tailwind.config.js—to extend colors, fonts, spacing, and breakpoints.

3. No Naming Problems

You avoid naming issues like .main-content-wrapper-section-header.

4. Automatically Optimized for Production

Tailwind removes unused classes and makes your final CSS extremely small.

5. Modern and Responsive by Design

Almost every utility has responsive, hover, focus, and dark-mode variants.

Installing Tailwind CSS

You can use Tailwind in three main ways:

Option 1: Use Tailwind CDN (Fastest for Beginners)

This option is perfect when you want to try Tailwind without installing anything.

<script src="https://cdn.tailwindcss.com"></script>
Enter fullscreen mode Exit fullscreen mode

Example:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
  <h1 class="text-3xl font-bold text-center">Hello Tailwind</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Option 2: Install Tailwind with NPM (Recommended for Real Projects)

Step 1: Initialize your project 

mkdir my-project
cd my-project
npm init -y
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Tailwind 

npm install -D tailwindcss
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

You now have a tailwind.config.js file.

Step 3: Create your main CSS file 

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 4: Build Tailwind 

npx tailwindcss -i ./styles.css -o ./output.css --watch
Enter fullscreen mode Exit fullscreen mode

Include output.css in your HTML.

Understanding Tailwind’s Utility Classes

Tailwind classes follow a pattern. Here are the main categories:

1. Spacing (Padding & Margin) 

<div class="p-4 m-2">Padding 4, Margin 2</div>
Enter fullscreen mode Exit fullscreen mode

2. Colors 

<p class="text-red-600">Error message</p>
<div class="bg-green-500 p-4 text-white">Success box</div>
Enter fullscreen mode Exit fullscreen mode

3. Typography 

<h1 class="text-4xl font-bold">Title</h1>
<p class="text-gray-600 leading-relaxed">Some text here...</p>
Enter fullscreen mode Exit fullscreen mode

4. Flexbox & Grid 

<div class="flex justify-between items-center">
  <span>A</span>
  <span>B</span>
</div>
Enter fullscreen mode Exit fullscreen mode 
<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-200 p-4">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

5. Borders & Rounding 

<div class="border border-gray-300 rounded-lg p-4">
  Content
</div>
Enter fullscreen mode Exit fullscreen mode

Responsive Design with Tailwind

Tailwind uses prefixes for breakpoints:

Prefix Breakpoint
sm: ≥ 640px
md: ≥ 768px
lg: ≥ 1024px
xl: ≥ 1280px
2xl: ≥ 1536px

Example:

<div class="text-sm md:text-xl lg:text-3xl">
  Responsive Text
</div>
Enter fullscreen mode Exit fullscreen mode

Hover, Focus, Active States 

<button class="bg-blue-600 hover:bg-blue-700 focus:ring focus:ring-blue-200 text-white px-4 py-2 rounded">
  Hover me
</button>
Enter fullscreen mode Exit fullscreen mode

Dark Mode

Enable dark mode in tailwind.config.js:

module.exports = {
  darkMode: 'class',
};
Enter fullscreen mode Exit fullscreen mode

Use it:

<div class="dark:bg-black dark:text-white p-4">
  Dark Mode Content
</div>
Enter fullscreen mode Exit fullscreen mode

Intermediate Concepts

Customizing Tailwind (tailwind.config.js)

You can extend the theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#7e3af2',
      },
      spacing: {
        128: '32rem',
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

Usage:

<div class="bg-brand text-white p-128">
  Custom Spacing + Custom Color
</div>
Enter fullscreen mode Exit fullscreen mode

Creating Reusable Components with @apply

Tailwind allows you to write reusable classes using @apply.

/* styles.css */
.btn {
  @apply px-4 py-2 rounded text-white font-semibold;
}

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700;
}
Enter fullscreen mode Exit fullscreen mode

Usage:

<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Delete</button>
Enter fullscreen mode Exit fullscreen mode

Build Real Components With Tailwind

1. Navbar Example 

<nav class="bg-white shadow p-4 flex justify-between items-center">
  <h1 class="text-xl font-bold">MySite</h1>

  <ul class="flex gap-6">
    <li><a href="#" class="text-gray-600 hover:text-black">Home</a></li>
    <li><a href="#" class="text-gray-600 hover:text-black">About</a></li>
    <li><a href="#" class="text-gray-600 hover:text-black">Contact</a></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

2. Card Component 

<div class="max-w-sm bg-white shadow-lg rounded-lg overflow-hidden">
  <img src="https://via.placeholder.com/400" alt="" class="w-full">

  <div class="p-4">
    <h2 class="text-xl font-bold mb-2">Card Title</h2>
    <p class="text-gray-600 mb-4">This is a sample description for a Tailwind card.</p>
    <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
      Learn More
    </button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

3. Login Form Example 

<div class="max-w-md mx-auto mt-20 bg-white p-8 shadow rounded-lg">
  <h2 class="text-2xl font-bold mb-6">Login</h2>

  <form>
    <input 
      type="email" 
      placeholder="Email" 
      class="w-full p-3 border rounded mb-4">

    <input 
      type="password" 
      placeholder="Password" 
      class="w-full p-3 border rounded mb-4">

    <button 
      class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-700">
      Sign In
    </button>
  </form>
</div>
Enter fullscreen mode Exit fullscreen mode

Final Tips for Tailwind CSS Users

1. Learn the utility classes step by step

Start with spacing, colors, and typography.

2. Use the Tailwind documentation

The documentation is one of the best in the industry.

3. Avoid overusing @apply

Use it only for repeated patterns.

4. Use Prettier + Tailwind plugin

It sorts your classes automatically.

5. Build real components to master Tailwind

Buttons, navbars, cards, sidebars, landing pages.

Conclusion

Tailwind CSS is an extremely powerful and flexible framework for modern UI design. It eliminates the need to write large CSS files, gives you complete design freedom, and simplifies responsive design. Whether you are building personal projects, landing pages, or full-scale web applications, Tailwind can speed up your workflow while keeping your UI consistent and clean.

If you are a beginner, start with spacing, colors, and typography. If you’re intermediate, focus on customizing Tailwind and building reusable components.

Happy coding.

Top comments (0)