EP 1: What is Tailwind CSS? Why Developers Worldwide Are Obsessed - Your Journey to Becoming a Pro

Have you ever experienced this? Spending all day writing CSS, but the results aren't what you wanted. Or sometimes you get it looking perfect, but when you open it on mobile, the layout completely breaks. If this sounds like you, believe me, you're not alone.

But what if I told you there's a CSS framework that can solve all these problems and make you build beautiful websites 10x faster? Would you believe me?

That's Tailwind CSS - the framework that's revolutionizing the web development world and captivating developers globally. According to npm trends statistics, Tailwind CSS has been growing consistently and gaining popularity rapidly over the past few years.

Today we'll learn what Tailwind CSS is, why it's special, and how you can get started using it. Let's begin!

What is Tailwind CSS? Understand it Clearly in 5 Minutes

Definition and Core Principles

Tailwind CSS is a Utility-First CSS Framework that changes how we think about writing CSS. Instead of writing component-specific classes in separate files, we use small, multiple classes to compose the designs we want.

Let's look at a comparison:

Traditional CSS:

/* styles.css */
.button {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #2563eb;
}

<button class="button">Click me</button>

Tailwind CSS:

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

See that? With Tailwind CSS, we don't need to write separate CSS files at all. Just add the classes we need to the HTML and get the same result.

Why is it Called "Utility-First"?

"Utility-First" means using CSS classes that have specific, single purposes (Utilities) to compose designs, instead of writing complex CSS classes.

Basic Utility Class Examples:

• bg-blue-500 = background-color: #3b82f6
• text-white = color: white
• px-4 = padding-left: 1rem; padding-right: 1rem
• py-2 = padding-top: 0.5rem; padding-bottom: 0.5rem
• rounded = border-radius: 0.25rem
• hover:bg-blue-600 = background-color: #2563eb (on hover)

Benefits of this approach:

• Speed: No need to think of new class names
• Flexibility: Easy to customize
• Understandable: Read and immediately know what it does
• No duplication: No duplicate CSS problems

Here's an example of creating a simple card:

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <img class="w-full h-48 object-cover rounded-t-lg" src="image.jpg" alt="Image">
  <div class="pt-4">
    <h2 class="text-xl font-bold text-gray-800">Card Title</h2>
    <p class="text-gray-600 mt-2">Lorem ipsum dolor sit amet consectetur...</p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded mt-4 hover:bg-blue-600 transition">
      Read More
    </button>
  </div>
</div>

Tailwind CSS vs Bootstrap: The Battle of the Era

Advantages of Tailwind CSS

1. Smaller File Size (with PurgeCSS)

Tailwind CSS comes with a PurgeCSS system that removes unused classes from the final CSS file, making the file smaller.

• Tailwind CSS: ~10-30KB (after purge)
• Bootstrap 5: ~25-30KB (minified + gzipped)

2. Design Flexibility

Bootstrap has pre-built components that make many websites look similar, but Tailwind gives much more design freedom.

3. No Need to Write Additional CSS

With the Utility Classes system covering almost all use cases, you don't need to write additional CSS 80% of the time.

4. Better Performance

• No unnecessary CSS
• No CSS conflicts
• Faster loading times
• Supports JIT (Just-In-Time) compilation

Disadvantages to Know

1. Learning Curve

Initially, you need to learn all new class names, which may take time to adjust.

2. HTML May Look Messy at First

Using multiple classes in one line may make HTML look cluttered.

3. Need to Remember Many Classes

Despite good documentation, memorizing frequently used classes is still necessary.

Comparison with Bootstrap

Button Creation Comparison:

Bootstrap:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

Tailwind CSS:

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

Installing Tailwind CSS in 3 Ways

Method 1: Using CDN (Easiest Start)

This method is suitable for testing or small projects:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Test</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="bg-blue-500 text-white p-4">
        <h1 class="text-2xl font-bold">Hello Tailwind CSS!</h1>
    </div>
</body>
</html>

Pros:

• Works immediately
• No additional installation needed
• Perfect for testing

Cons:

• Large file size (no PurgeCSS)
• Cannot customize
• Not suitable for production

Method 2: Install via NPM

This method is suitable for real projects that need customization and good performance:

Step 1: Install Tailwind CSS

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

Step 2: Configure Settings

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./pages/**/*.{html,js}",
    "./components/**/*.{html,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Add Tailwind Directives

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

Step 4: Build CSS

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

Method 3: Using Tailwind CLI

A newer method that's easier than using NPM:

Step 1: Download Tailwind CLI

Go to https://github.com/tailwindlabs/tailwindcss/releases and download the appropriate file for your operating system.

# macOS/Linux example
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64
chmod +x tailwindcss-macos-x64
mv tailwindcss-macos-x64 tailwindcss

Step 2: Initialize Configuration

./tailwindcss init

Step 3: Build CSS

./tailwindcss -i input.css -o output.css --watch

First Try: Create a Simple Web Page

Basic HTML Structure

Let's create our first web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- Content will be added in next steps -->
</body>
</html>

Create Basic Components

1. Header and Navigation

<header class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-6">
            <div class="flex items-center">
                <h1 class="text-2xl font-bold text-gray-900">My Website</h1>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
            </nav>
        </div>
    </div>
</header>

2. Hero Section

<section class="bg-blue-600 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">
                Welcome to My Website
            </h1>
            <p class="text-xl md:text-2xl mb-8">
                Creating amazing experiences with Tailwind CSS
            </p>
            <button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition">
                Get Started
            </button>
        </div>
    </div>
</section>

3. Card Components

<section class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="w-12 h-12 bg-blue-500 rounded-lg mb-4"></div>
                <h3 class="text-xl font-semibold mb-2">Fast</h3>
                <p class="text-gray-600">Build faster with utility-first CSS framework</p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="w-12 h-12 bg-green-500 rounded-lg mb-4"></div>
                <h3 class="text-xl font-semibold mb-2">Flexible</h3>
                <p class="text-gray-600">Customize everything to match your design</p>
            </div>
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="w-12 h-12 bg-purple-500 rounded-lg mb-4"></div>
                <h3 class="text-xl font-semibold mb-2">Modern</h3>
                <p class="text-gray-600">Built for modern web development</p>
            </div>
        </div>
    </div>
</section>

Testing Responsive Design

Tailwind CSS makes creating responsive design very easy:

<!-- Example of using Responsive Classes -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- grid-cols-1 = 1 column on mobile -->
    <!-- md:grid-cols-2 = 2 columns on tablet -->
    <!-- lg:grid-cols-3 = 3 columns on desktop -->
</div>

<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
    <!-- text-2xl on mobile, text-4xl on tablet, text-6xl on desktop -->
    Responsive Heading
</h1>

Basic Techniques You Should Know

Class Naming System

Tailwind CSS has a consistent class naming system:

1. Spacing (padding, margin)

<!-- p = padding, m = margin -->
<!-- t = top, b = bottom, l = left, r = right, x = left+right, y = top+bottom -->
<div class="p-4">padding: 1rem</div>
<div class="px-4 py-2">padding: 0.5rem 1rem</div>
<div class="m-8">margin: 2rem</div>
<div class="mt-4 mb-2">margin-top: 1rem, margin-bottom: 0.5rem</div>

2. Colors

<!-- bg = background, text = text color -->
<!-- Colors have 9 levels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 -->
<div class="bg-blue-500 text-white">Blue background, white text</div>
<div class="bg-red-100 text-red-800">Light red background, dark red text</div>

3. Typography

<!-- text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, etc. -->
<h1 class="text-4xl font-bold">Large heading</h1>
<p class="text-base font-normal">Normal paragraph</p>
<span class="text-sm text-gray-500">Small muted text</span>

IntelliSense and VS Code Setup

To write Tailwind CSS faster, it's recommended to install extensions:

1. Tailwind CSS IntelliSense

• Auto-complete for Tailwind classes
• Shows CSS values for each class
• Detects errors

2. VS Code Settings

// settings.json
{
  "tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "typescript": "typescript"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

3. Useful Shortcuts

• Ctrl + Space: Call auto-complete
• Ctrl + Click: See CSS value of class
• F12: Go to definition

Cheat Sheet for Beginners

Most frequently used classes:

<!-- Layout -->
<div class="flex items-center justify-center">Flexbox center</div>
<div class="grid grid-cols-3 gap-4">Grid 3 columns</div>

<!-- Spacing -->
<div class="p-4 m-2">Padding 1rem, margin 0.5rem</div>

<!-- Colors -->
<div class="bg-blue-500 text-white">Blue background</div>

<!-- Typography -->
<h1 class="text-2xl font-bold">Large bold heading</h1>

<!-- Borders -->
<div class="border border-gray-300 rounded-lg">Border with rounded corners</div>

<!-- Shadows -->
<div class="shadow-md">Medium shadow</div>

<!-- Responsive -->
<div class="hidden md:block">Hide on mobile, show on desktop</div>

Common Beginner Mistakes

Common Errors

1. Using Overlapping Classes

<!-- Wrong -->
<div class="p-4 px-6">
  <!-- px-6 will override padding-left and padding-right of p-4 -->
  <!-- Result: padding: 1rem 1.5rem (not 1rem all around) -->
</div>

<!-- Correct -->
<div class="py-4 px-6">
  <!-- padding: 1rem 1.5rem as intended -->
</div>

2. Not Understanding Box Model

<!-- May not work as expected -->
<div class="w-64 p-4 border-2">
    <!-- Total width will be 256px + 32px + 4px = 292px -->
</div>

<!-- Use box-border to include border and padding in size -->
<div class="w-64 p-4 border-2 box-border">
    <!-- Total width will be exactly 256px -->
</div>

3. Forgetting to Use Responsive Classes

<!-- Not responsive -->
<div class="flex">
    <div class="w-1/2">Left</div>
    <div class="w-1/2">Right</div>
</div>

<!-- Responsive -->
<div class="flex flex-col md:flex-row">
    <div class="w-full md:w-1/2">Left</div>
    <div class="w-full md:w-1/2">Right</div>
</div>

How to Fix and Avoid

1. Use Browser DevTools

• Check if classes are actually working
• See which classes are being overridden

2. Read Documentation

• tailwindcss.com has excellent documentation
• Complete usage examples

3. Use Tailwind UI

• Ready-made component examples
• Learn from expert-written code

4. Helpful Tools

• Tailwind CSS IntelliSense: Auto-complete
• Headwind: Organize classes neatly
• Tailwind CSS Cheat Sheet: Reference for frequently used classes

Advanced Features You Should Know

1. JIT (Just-In-Time) Compilation

Modern Tailwind CSS uses JIT compilation that generates only the classes actually used, making:

• Faster builds
• Smaller files
• Ability to use any value like w-[123px]

2. Custom Properties and @apply

@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
  }
}

3. Dark Mode

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Content that adapts to dark mode
</div>

Summary

Tailwind CSS is more than just a regular CSS framework. It's a tool that will change the way you think about writing CSS forever. With the Utility-First concept that makes you build websites faster, more flexibly, and with better performance.

What we learned in EP 1:

• Tailwind CSS is a Utility-First Framework that uses small, multiple classes composed together
• Has many advantages like small files, flexibility, no need to write additional CSS
• Can be installed in 3 ways: CDN, NPM, or CLI
• Has basic techniques you should know before starting
• Supports advanced features like JIT compilation and Dark Mode

EP 2 "What is Utility-First? Master Tailwind's Class System Like a Pro" we'll dive deep into Tailwind CSS's class system, learn how to use each category, and techniques for memorizing frequently used classes so you can write Tailwind CSS professionally.

If you're interested in learning more about Web Development, CSS Frameworks, and web development technologies, subscribe to Superdev School! We have high-quality courses and articles that will help elevate your programming skills.

Read more

• Golang The Series

• JS2GO

• 10 Eps That Will Make You a Pro Tailwind CSS Overnight

🔵 Facebook: Superdev School  (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school

Additional Resources and Recommended Tools

Official Resources

• Tailwind CSS Documentation: https://tailwindcss.com
• Tailwind UI: https://tailwindui.com (Premium component library)
• Headless UI: https://headlessui.com (Unstyled components)

Useful Tools

• Tailwind CSS IntelliSense (VS Code Extension)
• Tailwind CSS Cheat Sheet: https://nerdcave.com/tailwind-cheat-sheet
• Tailwind Play: https://play.tailwindcss.com (Online playground)

Community and Learning Resources

• Tailwind CSS Discord: Tailwind CSS user community
• YouTube Channels: Tailwind Labs, Traversy Media, The Net Ninja
• GitHub Examples: Real project examples using Tailwind CSS

Ready to change the way you write CSS? Let's get started with Tailwind CSS!