Tailwind CSS

Tailwind CSS changed how developers write CSS. Instead of writing custom CSS or using component libraries, you compose designs using utility classes directly in your HTML. It's controversial, polarizing, and once you get it, you never want to go back.

Why Use Tailwind

No Context Switching: You stay in your HTML/JSX. No jumping between files, no thinking up class names, no wondering where styles are defined. Everything is right there.

Consistent Design: Tailwind's design system (spacing, colors, breakpoints) is built-in. Your UI automatically looks cohesive because you're constrained to a sensible scale.

Faster Development: Once you learn the classes, you build UIs incredibly fast. No writing CSS, no naming classes, no fighting specificity.

Tiny Production Bundle: Tailwind scans your code and only includes the classes you actually use. Your CSS file might be 10KB even for large apps.

Mobile-First Responsive: Media queries are just prefixes: md:text-lg lg:grid-cols-3. Responsive design becomes trivial.

Key Features

• Utility Classes - Thousands of single-purpose classes
• Design Tokens - Consistent spacing, colors, typography
• Responsive Design - Mobile-first with intuitive prefixes
• Dark Mode - Built-in with dark: prefix
• Hover/Focus States - Just add hover: or focus: prefix
• Custom Configuration - Extend or override the defaults
• JIT Compiler - Generate any class on-demand
• Typography Plugin - Beautiful prose styling
• Forms Plugin - Better form element defaults

The Learning Curve

Week 1: "This is insane, my HTML is so ugly" Week 2: "Okay this is faster than I expected" Week 3: "I'm never writing CSS files again"

The class names look verbose at first. But once you internalize the system, you'll be styling faster than you ever have.

Code Example

<!-- Traditional CSS approach -->
<div class="card">
  <h2 class="card-title">Hello World</h2>
  <p class="card-description">This is a description</p>
  <button class="card-button">Click me</button>
</div>

<!-- Tailwind approach -->
<div class="rounded-lg border border-gray-200 p-6 shadow-sm">
  <h2 class="text-2xl font-semibold mb-2">Hello World</h2>
  <p class="text-gray-600 mb-4">This is a description</p>
  <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    Click me
  </button>
</div>

No CSS file needed. Everything is self-contained and obvious.

Responsive Design

<!-- Mobile: stack, Desktop: side-by-side -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/2">Left</div>
  <div class="w-full md:w-1/2">Right</div>
</div>

<!-- Different text sizes per breakpoint -->
<h1 class="text-2xl md:text-4xl lg:text-5xl">
  Responsive Heading
</h1>

No media queries to write. Just prefix classes with sm:, md:, lg:, xl:, 2xl:.

Dark Mode

<!-- Light bg, dark bg in dark mode -->
<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-gray-100">
    Title works in both modes
  </h1>
</div>

Enable dark mode in your config, then just prefix classes with dark:.

Perfect For

• Modern web apps (React, Vue, Svelte)
• Rapid prototyping and MVPs
• Projects where you're the only developer
• Teams that want to avoid CSS bikeshedding
• Anyone who hates naming things

Getting Started

# With Next.js
npx create-next-app@latest my-app
# Choose Tailwind during setup

# Or add to existing project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

With Next.js, it's already configured. Just start using classes.

Common Patterns

Card Component:

<div class="rounded-lg border border-gray-200 p-6 shadow-sm hover:shadow-md transition">
  <!-- content -->
</div>

Button:

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

Flex Layout:

<div class="flex items-center justify-between gap-4">
  <div>Left</div>
  <div>Right</div>
</div>

Grid:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- items -->
</div>

Integration With shadcn/ui

The perfect combo: Tailwind for styling + shadcn/ui for components.

npx shadcn-ui@latest init
npx shadcn-ui@latest add button

Now you have beautiful, customizable components styled with Tailwind that you own and can modify.

Customization

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#6366f1',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

Now use bg-brand and font-sans in your HTML.

The Criticisms (and Rebuttals)

"The classes are too long!"

• True, but you write them once. CSS grows over time, Tailwind doesn't.

"It's not semantic!"

• Neither is <div class="card">. Semantics are in your HTML structure, not class names.

"I could just write CSS!"

• You could. But you'll spend more time naming things and hunting for styles.

"What about reusability?"

• Extract components. React/Vue/Svelte solve reusability, not CSS.

When to Choose Something Else

Consider alternatives if you:

• Hate utility classes philosophically
• Need extremely custom designs (Tailwind works but might feel limiting)
• Work with designers who want full CSS control
• Already have a CSS system that works

But for most solo builders, especially those using React/Next.js, Tailwind is the fastest way to build good-looking UIs.

Tips for Solo Builders

• Install the Tailwind CSS IntelliSense VS Code extension (essential)
• Use @apply sparingly - stay in HTML when possible
• Learn the spacing scale (4, 8, 12, 16, 20, 24... are 1, 2, 3, 4, 5, 6...)
• Use lg: prefix for desktop breakpoint (1024px)
• Copy component examples from Tailwind UI or shadcn/ui
• Don't fight it - embrace the utility-first mindset

Resources

Tailwind UI: Official component examples (paid, but worth it) shadcn/ui: Free, beautiful components Headless UI: Unstyled accessible components to style with Tailwind DaisyUI: Component library built on Tailwind Flowbite: Another component library option

The Bottom Line

Tailwind is polarizing. You'll either love it or hate it. But if you're a solo builder who wants to ship fast without fighting CSS, give it a real try. Most developers who stick with it for 2 weeks never go back.

It's become the default styling solution for modern web development, especially in the React/Next.js ecosystem.