I Was Wrong About Tailwind

I Thought Tailwind Was Dumb

Seriously. "Just write CSS in your HTML" sounded like a step backwards. We spent years separating concerns, and now this?

Then I built a real project with it. Shipped faster than ever. Here's what clicked.

Why Utilities Actually Work

Traditional way:

<div class="sidebar">...</div>

.sidebar {
    width: 250px;
    padding: 20px;
    background: white;
    border-right: 1px solid #e5e5e5;
}

You're constantly switching files. And what do you name the thing inside the sidebar? .sidebar-inner? .sidebar-content?

Tailwind way:

<div class="w-64 p-5 bg-white border-r border-gray-200">...</div>

No naming. No file switching. Changes are obvious and local.

Setting Up Your Config

Before writing any code, customize tailwind.config.js:

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {
            colors: {
                primary: '#2563EB',
                'primary-hover': '#1D4ED8',
            },
            fontFamily: {
                sans: ['Inter', 'sans-serif'],
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

Now bg-primary uses your brand color, not Tailwind's default blue.

The Spacing Scale

Memorize this and you'll be 10x faster:

1 = 4px
2 = 8px
4 = 16px
6 = 24px
8 = 32px

So p-4 is 16px padding. mt-6 is 24px margin top. gap-2 is 8px between items.

It becomes muscle memory fast.

Responsive Design

Mobile-first. Prefixes apply at that breakpoint and up:

<div class="text-sm md:text-base lg:text-lg">
    Gets bigger on larger screens
</div>

<div class="flex flex-col md:flex-row">
    Stacks on mobile, row on tablet+
</div>

Default breakpoints:

sm - 640px
md - 768px
lg - 1024px
xl - 1280px

Common Patterns

Cards

<div class="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
    <h3 class="font-semibold text-gray-900">Title</h3>
    <p class="mt-2 text-gray-600">Description here.</p>
</div>

Buttons

<button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors">
    Click me
</button>

Form Inputs

<input
    type="text"
    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
>

State Variants

Hover, focus, disabled, etc:

<button class="bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed">

Group hover (parent hover affects child):

<div class="group">
    <span class="group-hover:text-blue-500">Shows blue when parent is hovered</span>
</div>

Dark Mode

Enable class-based dark mode:

// tailwind.config.js
module.exports = {
    darkMode: 'class',
}

Then use the dark: variant:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    Adapts to theme
</div>

When to Extract

If you're copy-pasting the same 10 classes everywhere, extract a component (Vue/React) or use @apply:

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

But do this sparingly. Most "reuse" is better handled by actual components.

It Grows On You

First day: "This is ugly, why would anyone use this" First week: "Okay, it's kind of fast" First month: "I never want to write CSS files again"

Give it an honest try on a real project. The productivity gains are real.