Tailwind CSS - Utility Classes

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.

Key Concepts

Utility-First Approach

Instead of writing custom CSS, compose designs using pre-built utility classes:

<!-- Traditional CSS --> <style> .btn { background-color: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; } </style> <button class="btn">Click me</button>

<!-- Tailwind utility-first --> <button class="bg-blue-500 text-white px-4 py-2 rounded"> Click me </button>

Core Utility Categories

Layout

• Display: block , inline-block , flex , grid , hidden

• Position: static , relative , absolute , fixed , sticky

• Flexbox: flex-row , flex-col , justify-center , items-center , gap-4

• Grid: grid-cols-3 , grid-rows-2 , col-span-2 , row-span-1

Spacing

• Padding: p-4 , px-2 , py-6 , pt-8 , pr-3 , pb-2 , pl-1

• Margin: m-4 , mx-auto , my-6 , -mt-4 (negative margins)

• Space Between: space-x-4 , space-y-2

Typography

• Font Family: font-sans , font-serif , font-mono

• Font Size: text-xs , text-sm , text-base , text-lg , text-xl , text-2xl , text-3xl

• Font Weight: font-thin , font-normal , font-medium , font-semibold , font-bold

• Text Color: text-gray-900 , text-blue-500 , text-red-600

• Text Alignment: text-left , text-center , text-right , text-justify

• Line Height: leading-none , leading-tight , leading-normal , leading-relaxed

Colors & Backgrounds

• Background Color: bg-white , bg-gray-100 , bg-blue-500

• Background Gradient: bg-gradient-to-r from-blue-500 to-purple-600

• Opacity: opacity-0 , opacity-50 , opacity-100

Borders & Shadows

• Border: border , border-2 , border-t , border-gray-300

• Border Radius: rounded , rounded-lg , rounded-full , rounded-none

• Box Shadow: shadow-sm , shadow , shadow-md , shadow-lg , shadow-xl

• Ring: ring-2 , ring-blue-500 , ring-offset-2

Effects

• Transitions: transition , transition-all , duration-300 , ease-in-out

• Transforms: scale-110 , rotate-45 , translate-x-4 , skew-y-3

• Filters: blur-sm , brightness-50 , contrast-125 , grayscale

Best Practices

1. Responsive Design with Breakpoints

Use responsive prefixes for different screen sizes:

<!-- Mobile-first: stack vertically on small screens, horizontal on medium+ --> <div class="flex flex-col md:flex-row gap-4"> <div class="w-full md:w-1/2">Column 1</div> <div class="w-full md:w-1/2">Column 2</div> </div>

<!-- Responsive text sizes --> <h1 class="text-2xl md:text-4xl lg:text-6xl"> Responsive Heading </h1>

Breakpoints:

• sm:

• 640px

• md:

• 768px

• lg:

• 1024px

• xl:

• 1280px

• 2xl:

• 1536px

2. State Variants

Apply utilities based on state:

<!-- Hover, focus, active states --> <button class=" bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded transition focus:ring-2 focus:ring-blue-300 active:scale-95 "> Interactive Button </button>

<!-- Group hover --> <div class="group"> <img class="group-hover:scale-110 transition" src="..." /> <p class="text-gray-600 group-hover:text-blue-500"> Hover the parent </p> </div>

3. Dark Mode

Use dark: prefix for dark mode styles:

<div class=" bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700 "> Dark mode compatible content </div>

4. Arbitrary Values

Use square brackets for one-off custom values:

<!-- Custom spacing --> <div class="mt-[17px] p-[13px]">

<!-- Custom colors --> <div class="bg-[#1da1f2] text-[rgb(255,100,50)]">

<!-- Custom breakpoints --> <div class="min-[890px]:flex">

5. Class Organization

Order classes logically for readability:

<!-- Layout → Spacing → Typography → Colors → Effects --> <div class=" flex items-center justify-between px-6 py-4 text-lg font-semibold bg-white text-gray-900 shadow-md rounded-lg hover:shadow-xl transition ">

Examples

Card Component

<div class=" max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 "> <img class="w-full h-48 object-cover" src="/image.jpg" alt="Card image" /> <div class="p-6"> <h2 class="text-2xl font-bold text-gray-900 mb-2"> Card Title </h2> <p class="text-gray-600 leading-relaxed mb-4"> Card description goes here with some helpful information. </p> <button class=" w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition-colors "> Learn More </button> </div> </div>

Responsive Navigation

<nav class=" bg-white shadow-lg border-b border-gray-200 "> <div class=" max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 "> <div class="flex justify-between items-center h-16"> <!-- Logo --> <div class="flex-shrink-0"> <h1 class="text-2xl font-bold text-blue-600">Logo</h1> </div>

  <!-- Desktop Navigation -->
  <div class="hidden md:flex space-x-8">
    <a href="#" class="
      text-gray-700 hover:text-blue-600
      px-3 py-2 rounded-md text-sm font-medium
      transition-colors
    ">
      Home
    </a>
    <a href="#" class="
      text-gray-700 hover:text-blue-600
      px-3 py-2 rounded-md text-sm font-medium
      transition-colors
    ">
      About
    </a>
    <a href="#" class="
      text-gray-700 hover:text-blue-600
      px-3 py-2 rounded-md text-sm font-medium
      transition-colors
    ">
      Contact
    </a>
  </div>

  <!-- Mobile menu button -->
  <div class="md:hidden">
    <button class="
      text-gray-700 hover:text-blue-600
      p-2
    ">
      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
</div>

</div> </nav>

Grid Layout

<div class=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 "> <div class="bg-white p-6 rounded-lg shadow">Item 1</div> <div class="bg-white p-6 rounded-lg shadow">Item 2</div> <div class="bg-white p-6 rounded-lg shadow">Item 3</div> <div class="bg-white p-6 rounded-lg shadow col-span-1 md:col-span-2"> Wide Item </div> <div class="bg-white p-6 rounded-lg shadow">Item 5</div> </div>

Common Patterns

Centering Content

<!-- Flexbox centering --> <div class="flex items-center justify-center min-h-screen"> <div>Centered content</div> </div>

<!-- Grid centering --> <div class="grid place-items-center min-h-screen"> <div>Centered content</div> </div>

<!-- Absolute centering --> <div class="relative h-screen"> <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"> Centered content </div> </div>

Truncating Text

<!-- Single line truncate --> <p class="truncate"> This text will be truncated with an ellipsis if it's too long </p>

<!-- Multi-line truncate --> <p class="line-clamp-3"> This text will be truncated after 3 lines with an ellipsis </p>

Aspect Ratios

<!-- 16:9 aspect ratio --> <div class="aspect-video bg-gray-200"> <iframe src="..." class="w-full h-full"></iframe> </div>

<!-- Square aspect ratio --> <div class="aspect-square bg-gray-200"> <img src="..." class="w-full h-full object-cover" /> </div>

Anti-Patterns

❌ Don't Use Inline Styles

<!-- Bad: Mixing inline styles with Tailwind --> <div class="p-4" style="margin-top: 20px;"> Content </div>

<!-- Good: Use Tailwind utilities --> <div class="p-4 mt-5"> Content </div>

❌ Don't Create Unnecessary Wrapper Divs

<!-- Bad: Extra wrapper for centering --> <div class="flex justify-center"> <div class="text-center"> <h1>Title</h1> </div> </div>

<!-- Good: Direct styling --> <h1 class="text-center">Title</h1>

❌ Don't Overuse Arbitrary Values

<!-- Bad: Too many custom values --> <div class="mt-[17px] mb-[23px] pt-[11px] pb-[19px]">

<!-- Good: Use standard spacing scale --> <div class="my-6 py-3">

❌ Don't Forget Mobile-First

<!-- Bad: Desktop-first approach --> <div class="w-1/2 sm:w-full">

<!-- Good: Mobile-first approach --> <div class="w-full sm:w-1/2">

Related Skills

• tailwind-configuration: Customizing Tailwind config and theme

• tailwind-components: Building reusable component patterns

• tailwind-responsive-design: Advanced responsive design techniques

• tailwind-performance: Optimizing Tailwind for production