Tailwind CSS Guide 2026: Complete Utility-First CSS Tutorial | DevTools Hub

🎨 What is Tailwind CSS?

Tailwind is a utility-first CSS framework. Instead of writing custom CSS, you compose designs using pre-built utility classes directly in your HTML.

Why Tailwind?

Fast Development: No context switching
Consistent Design: Design system built-in
Small Bundle: Only used classes included
Responsive: Mobile-first utilities
Customizable: Full control via config
No Naming: No more "what should I call this?"

🚀 Getting Started

# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

# Add to CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

📐 Core Concepts

Layout

<!-- Container -->
<div class="container mx-auto px-4">Content</div>

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-6">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</div>

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

Typography

<!-- Text Size -->
<h1 class="text-5xl font-bold">Heading</h1>
<p class="text-base text-gray-600">Paragraph</p>

<!-- Font Weight -->
<p class="font-light">Light</p>
<p class="font-normal">Normal</p>
<p class="font-bold">Bold</p>

<!-- Text Color -->
<p class="text-blue-500">Blue text</p>
<p class="text-gray-700">Gray text</p>

<!-- Text Alignment -->
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>

Colors & Backgrounds

<!-- Background Color -->
<div class="bg-blue-500">Blue background</div>
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
  Gradient
</div>

<!-- Border -->
<div class="border border-gray-300 rounded-lg">
  Bordered box
</div>

<!-- Shadow -->
<div class="shadow-lg">Large shadow</div>
<div class="shadow-md hover:shadow-xl">Hover effect</div>

📱 Responsive Design

<!-- Mobile-first breakpoints -->
<!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px -->

<div class="
  text-sm          <!-- Default (mobile) -->
  md:text-base     <!-- Tablet -->
  lg:text-lg       <!-- Desktop -->
">
  Responsive text
</div>

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

<!-- Hide/Show -->
<div class="hidden md:block">
  Visible on tablet and up
</div>

🌙 Dark Mode

// tailwind.config.js
export default {
  darkMode: 'class', // or 'media'
  // ...
}

<!-- Dark mode classes -->
<div class="
  bg-white dark:bg-gray-900
  text-gray-900 dark:text-white
">
  Content adapts to dark mode
</div>

<button class="
  bg-blue-500 hover:bg-blue-600
  dark:bg-blue-600 dark:hover:bg-blue-700
">
  Button
</button>

// Toggle dark mode
document.documentElement.classList.toggle('dark')

🎯 Common Patterns

Button

<button class="
  px-6 py-3
  bg-blue-500 hover:bg-blue-600
  text-white font-semibold
  rounded-lg
  shadow-md hover:shadow-lg
  transition-all duration-200
  disabled:opacity-50 disabled:cursor-not-allowed
">
  Click me
</button>

Card

<div class="
  bg-white dark:bg-gray-800
  rounded-xl shadow-lg
  p-6
  hover:shadow-xl
  transition-shadow
">
  <h3 class="text-xl font-bold mb-2">Card Title</h3>
  <p class="text-gray-600 dark:text-gray-300">
    Card content goes here
  </p>
</div>

Form Input

<input 
  type="text"
  class="
    w-full px-4 py-2
    border border-gray-300 rounded-lg
    focus:outline-none focus:ring-2 focus:ring-blue-500
    dark:bg-gray-800 dark:border-gray-600
  "
  placeholder="Enter text..."
/>

⚙️ Customization

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#10B981',
        accent: '#F59E0B',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
}

<!-- Use custom values -->
<div class="bg-primary text-white rounded-4xl p-128">
  Custom styled
</div>

✅ Best Practices

Use @apply sparingly: Embrace utility-first
Extract components: Reuse with React/Vue components
Consistent spacing: Use spacing scale (4, 8, 12, 16...)
Mobile-first: Start with mobile, add breakpoints
Dark mode from start: Easier than retrofitting
Use JIT mode: Faster builds, arbitrary values
Purge unused CSS: Keep bundle small

🎯 Conclusion

Tailwind CSS accelerates development by providing a comprehensive utility system. The learning curve is worth it—you'll build UIs faster and more consistently. Start with the basics, learn the patterns, and customize to match your design system.

🎨 Design Tools

Explore our color tools to help with your Tailwind designs.

Color Tools →

Tailwind CSS Guide 2026: Utility-First CSS