Tailwind CSS Utility Classes

This guide covers the comprehensive utility class system in Tailwind CSS, including layout, spacing, typography, colors, and responsive design utilities.

Tailwind CSS Utility Classes

Layout Utilities

Display

<!-- Display types -->
<div class="block">Block element</div>
<div class="inline">Inline element</div>
<div class="inline-block">Inline-block element</div>
<div class="flex">Flexbox container</div>
<div class="inline-flex">Inline flexbox container</div>
<div class="grid">CSS Grid container</div>
<div class="inline-grid">Inline grid container</div>
<div class="hidden">Hidden element</div>

Positioning

<!-- Position -->
<div class="static">Static positioning</div>
<div class="relative">Relative positioning</div>
<div class="absolute">Absolute positioning</div>
<div class="fixed">Fixed positioning</div>
<div class="sticky">Sticky positioning</div>

<!-- Top, Right, Bottom, Left -->
<div class="top-0">Top: 0</div>
<div class="right-0">Right: 0</div>
<div class="bottom-0">Bottom: 0</div>
<div class="left-0">Left: 0</div>

<!-- Z-index -->
<div class="z-0">Z-index: 0</div>
<div class="z-10">Z-index: 10</div>
<div class="z-20">Z-index: 20</div>
<div class="z-30">Z-index: 30</div>
<div class="z-40">Z-index: 40</div>
<div class="z-50">Z-index: 50</div>
<div class="z-auto">Z-index: auto</div>

Flexbox

<!-- Flex direction -->
<div class="flex flex-row">Horizontal flex</div>
<div class="flex flex-row-reverse">Reverse horizontal flex</div>
<div class="flex flex-col">Vertical flex</div>
<div class="flex flex-col-reverse">Reverse vertical flex</div>

<!-- Flex wrap -->
<div class="flex flex-wrap">Wrap flex items</div>
<div class="flex flex-wrap-reverse">Reverse wrap flex items</div>
<div class="flex flex-nowrap">No wrap flex items</div>

<!-- Flex grow/shrink -->
<div class="flex-1">Flex: 1 1 0%</div>
<div class="flex-auto">Flex: 1 1 auto</div>
<div class="flex-initial">Flex: 0 1 auto</div>
<div class="flex-none">Flex: none</div>

<!-- Justify content -->
<div class="flex justify-start">Justify start</div>
<div class="flex justify-end">Justify end</div>
<div class="flex justify-center">Justify center</div>
<div class="flex justify-between">Justify between</div>
<div class="flex justify-around">Justify around</div>
<div class="flex justify-evenly">Justify evenly</div>

<!-- Align items -->
<div class="flex items-start">Align items start</div>
<div class="flex items-end">Align items end</div>
<div class="flex items-center">Align items center</div>
<div class="flex items-baseline">Align items baseline</div>
<div class="flex items-stretch">Align items stretch</div>

<!-- Align self -->
<div class="self-auto">Align self auto</div>
<div class="self-start">Align self start</div>
<div class="self-end">Align self end</div>
<div class="self-center">Align self center</div>
<div class="self-stretch">Align self stretch</div>

Grid

<!-- Grid template columns -->
<div class="grid grid-cols-1">1 column</div>
<div class="grid grid-cols-2">2 columns</div>
<div class="grid grid-cols-3">3 columns</div>
<div class="grid grid-cols-4">4 columns</div>
<div class="grid grid-cols-5">5 columns</div>
<div class="grid grid-cols-6">6 columns</div>
<div class="grid grid-cols-12">12 columns</div>
<div class="grid grid-cols-none">No columns</div>

<!-- Grid template rows -->
<div class="grid grid-rows-1">1 row</div>
<div class="grid grid-rows-2">2 rows</div>
<div class="grid grid-rows-3">3 rows</div>
<div class="grid grid-rows-4">4 rows</div>
<div class="grid grid-rows-5">5 rows</div>
<div class="grid grid-rows-6">6 rows</div>
<div class="grid grid-rows-none">No rows</div>

<!-- Gap -->
<div class="grid gap-1">Gap 1</div>
<div class="grid gap-2">Gap 2</div>
<div class="grid gap-4">Gap 4</div>
<div class="grid gap-8">Gap 8</div>
<div class="grid gap-x-4">Horizontal gap 4</div>
<div class="grid gap-y-4">Vertical gap 4</div>

Sizing

<!-- Width -->
<div class="w-0">Width: 0</div>
<div class="w-px">Width: 1px</div>
<div class="w-0.5">Width: 0.125rem</div>
<div class="w-1">Width: 0.25rem</div>
<div class="w-2">Width: 0.5rem</div>
<div class="w-4">Width: 1rem</div>
<div class="w-8">Width: 2rem</div>
<div class="w-16">Width: 4rem</div>
<div class="w-32">Width: 8rem</div>
<div class="w-64">Width: 16rem</div>
<div class="w-auto">Width: auto</div>
<div class="w-full">Width: 100%</div>
<div class="w-screen">Width: 100vw</div>
<div class="w-min">Width: min-content</div>
<div class="w-max">Width: max-content</div>
<div class="w-fit">Width: fit-content</div>

<!-- Height -->
<div class="h-0">Height: 0</div>
<div class="h-px">Height: 1px</div>
<div class="h-0.5">Height: 0.125rem</div>
<div class="h-1">Height: 0.25rem</div>
<div class="h-2">Height: 0.5rem</div>
<div class="h-4">Height: 1rem</div>
<div class="h-8">Height: 2rem</div>
<div class="h-16">Height: 4rem</div>
<div class="h-32">Height: 8rem</div>
<div class="h-64">Height: 16rem</div>
<div class="h-auto">Height: auto</div>
<div class="h-full">Height: 100%</div>
<div class="h-screen">Height: 100vh</div>
<div class="h-min">Height: min-content</div>
<div class="h-max">Height: max-content</div>
<div class="h-fit">Height: fit-content</div>

Spacing Utilities

Margin

<!-- All sides -->
<div class="m-0">Margin: 0</div>
<div class="m-px">Margin: 1px</div>
<div class="m-0.5">Margin: 0.125rem</div>
<div class="m-1">Margin: 0.25rem</div>
<div class="m-2">Margin: 0.5rem</div>
<div class="m-4">Margin: 1rem</div>
<div class="m-8">Margin: 2rem</div>
<div class="m-16">Margin: 4rem</div>
<div class="m-auto">Margin: auto</div>

<!-- Horizontal and vertical -->
<div class="mx-4">Horizontal margin: 1rem</div>
<div class="my-4">Vertical margin: 1rem</div>

<!-- Individual sides -->
<div class="mt-4">Top margin: 1rem</div>
<div class="mr-4">Right margin: 1rem</div>
<div class="mb-4">Bottom margin: 1rem</div>
<div class="ml-4">Left margin: 1rem</div>

Padding

<!-- All sides -->
<div class="p-0">Padding: 0</div>
<div class="p-px">Padding: 1px</div>
<div class="p-0.5">Padding: 0.125rem</div>
<div class="p-1">Padding: 0.25rem</div>
<div class="p-2">Padding: 0.5rem</div>
<div class="p-4">Padding: 1rem</div>
<div class="p-8">Padding: 2rem</div>
<div class="p-16">Padding: 4rem</div>

<!-- Horizontal and vertical -->
<div class="px-4">Horizontal padding: 1rem</div>
<div class="py-4">Vertical padding: 1rem</div>

<!-- Individual sides -->
<div class="pt-4">Top padding: 1rem</div>
<div class="pr-4">Right padding: 1rem</div>
<div class="pb-4">Bottom padding: 1rem</div>
<div class="pl-4">Left padding: 1rem</div>

Typography Utilities

Font Family

<p class="font-sans">Sans-serif font</p>
<p class="font-serif">Serif font</p>
<p class="font-mono">Monospace font</p>

<p class="text-xs">Extra small text (0.75rem)</p>
<p class="text-sm">Small text (0.875rem)</p>
<p class="text-base">Base text (1rem)</p>
<p class="text-lg">Large text (1.125rem)</p>
<p class="text-xl">Extra large text (1.25rem)</p>
<p class="text-2xl">2XL text (1.5rem)</p>
<p class="text-3xl">3XL text (1.875rem)</p>
<p class="text-4xl">4XL text (2.25rem)</p>
<p class="text-5xl">5XL text (3rem)</p>
<p class="text-6xl">6XL text (3.75rem)</p>
<p class="text-7xl">7XL text (4.5rem)</p>
<p class="text-8xl">8XL text (6rem)</p>
<p class="text-9xl">9XL text (8rem)</p>

Font Weight

<p class="font-thin">Thin font weight (100)</p>
<p class="font-extralight">Extra light font weight (200)</p>
<p class="font-light">Light font weight (300)</p>
<p class="font-normal">Normal font weight (400)</p>
<p class="font-medium">Medium font weight (500)</p>
<p class="font-semibold">Semi-bold font weight (600)</p>
<p class="font-bold">Bold font weight (700)</p>
<p class="font-extrabold">Extra bold font weight (800)</p>
<p class="font-black">Black font weight (900)</p>

Text Alignment

<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text</p>

Text Decoration

<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<p class="no-underline">No underline</p>

Text Transform

<p class="uppercase">Uppercase text</p>
<p class="lowercase">Lowercase text</p>
<p class="capitalize">Capitalized text</p>
<p class="normal-case">Normal case text</p>

Line Height

<p class="leading-none">Line height: 1</p>
<p class="leading-tight">Line height: 1.25</p>
<p class="leading-snug">Line height: 1.375</p>
<p class="leading-normal">Line height: 1.5</p>
<p class="leading-relaxed">Line height: 1.625</p>
<p class="leading-loose">Line height: 2</p>

Color Utilities

Background Colors

<!-- Gray scale -->
<div class="bg-gray-50">Light gray background</div>
<div class="bg-gray-100">Gray 100 background</div>
<div class="bg-gray-200">Gray 200 background</div>
<div class="bg-gray-300">Gray 300 background</div>
<div class="bg-gray-400">Gray 400 background</div>
<div class="bg-gray-500">Gray 500 background</div>
<div class="bg-gray-600">Gray 600 background</div>
<div class="bg-gray-700">Gray 700 background</div>
<div class="bg-gray-800">Gray 800 background</div>
<div class="bg-gray-900">Dark gray background</div>

<!-- Primary colors -->
<div class="bg-red-500">Red background</div>
<div class="bg-blue-500">Blue background</div>
<div class="bg-green-500">Green background</div>
<div class="bg-yellow-500">Yellow background</div>
<div class="bg-purple-500">Purple background</div>
<div class="bg-pink-500">Pink background</div>
<div class="bg-indigo-500">Indigo background</div>
<div class="bg-teal-500">Teal background</div>

<!-- Special colors -->
<div class="bg-transparent">Transparent background</div>
<div class="bg-current">Current color background</div>
<div class="bg-black">Black background</div>
<div class="bg-white">White background</div>

Text Colors

<!-- Gray scale -->
<p class="text-gray-50">Light gray text</p>
<p class="text-gray-100">Gray 100 text</p>
<p class="text-gray-200">Gray 200 text</p>
<p class="text-gray-300">Gray 300 text</p>
<p class="text-gray-400">Gray 400 text</p>
<p class="text-gray-500">Gray 500 text</p>
<p class="text-gray-600">Gray 600 text</p>
<p class="text-gray-700">Gray 700 text</p>
<p class="text-gray-800">Gray 800 text</p>
<p class="text-gray-900">Dark gray text</p>

<!-- Primary colors -->
<p class="text-red-500">Red text</p>
<p class="text-blue-500">Blue text</p>
<p class="text-green-500">Green text</p>
<p class="text-yellow-500">Yellow text</p>
<p class="text-purple-500">Purple text</p>
<p class="text-pink-500">Pink text</p>
<p class="text-indigo-500">Indigo text</p>
<p class="text-teal-500">Teal text</p>

<!-- Special colors -->
<p class="text-transparent">Transparent text</p>
<p class="text-current">Current color text</p>
<p class="text-black">Black text</p>
<p class="text-white">White text</p>

Border Colors

<div class="border border-gray-200">Gray border</div>
<div class="border border-red-500">Red border</div>
<div class="border border-blue-500">Blue border</div>
<div class="border border-green-500">Green border</div>
<div class="border border-yellow-500">Yellow border</div>
<div class="border border-purple-500">Purple border</div>
<div class="border border-pink-500">Pink border</div>
<div class="border border-indigo-500">Indigo border</div>
<div class="border border-teal-500">Teal border</div>

Responsive Utilities

Responsive Prefixes

<!-- Responsive breakpoints -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

<div class="text-sm md:text-base lg:text-lg">
  Responsive text size
</div>

<div class="p-4 md:p-8 lg:p-12">
  Responsive padding
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  Responsive grid
</div>

<div class="flex flex-col md:flex-row">
  Responsive flex direction
</div>

Breakpoint Examples

<!-- Mobile first approach -->
<div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6">
  <!-- xs: full width -->
  <!-- sm: half width -->
  <!-- md: one-third width -->
  <!-- lg: one-quarter width -->
  <!-- xl: one-sixth width -->
</div>

<!-- Responsive typography -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
  Responsive heading
</h1>

<!-- Responsive spacing -->
<div class="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12">
  Responsive padding
</div>

State Utilities

Hover States

<button class="bg-blue-500 hover:bg-blue-700">
  Hover button
</button>

<div class="bg-gray-100 hover:bg-gray-200">
  Hover div
</div>

<a class="text-blue-500 hover:text-blue-700 hover:underline">
  Hover link
</a>

Focus States

<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200">
  Focus input
</input>

<button class="bg-blue-500 focus:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
  Focus button
</button>

Active States

<button class="bg-blue-500 active:bg-blue-800">
  Active button
</button>

Disabled States

<button class="bg-gray-300 text-gray-500 cursor-not-allowed" disabled>
  Disabled button
</button>

Custom Utilities

Arbitrary Values

<!-- Custom dimensions -->
<div class="w-[200px] h-[300px]">
  Custom width and height
</div>

<!-- Custom colors -->
<div class="bg-[#ff6b6b] text-[#ffffff]">
  Custom colors
</div>

<!-- Custom spacing -->
<div class="p-[1.5rem] m-[2rem]">
  Custom padding and margin
</div>

<!-- Custom font size -->
<p class="text-[18px] leading-[1.8]">
  Custom font size and line height
</p>

@apply Directive

/* Custom component classes */
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

.input-field {
  @apply border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

Best Practices

1. Use Semantic Class Names

<!-- Good: Group related utilities -->
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md">
  <h2 class="text-xl font-semibold text-gray-900">Title</h2>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Action
  </button>
</div>

<!-- Better: Extract to component classes -->
<style>
.card-header {
  @apply flex items-center justify-between p-4 bg-white rounded-lg shadow-md;
}

.card-title {
  @apply text-xl font-semibold text-gray-900;
}

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}
</style>

2. Responsive Design Patterns

<!-- Mobile-first responsive design -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <!-- Grid items -->
</div>

<!-- Responsive typography -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Responsive heading
</h1>

3. Consistent Spacing

<!-- Use consistent spacing scale -->
<div class="space-y-4">
  <div class="p-4">Item 1</div>
  <div class="p-4">Item 2</div>
  <div class="p-4">Item 3</div>
</div>

<!-- Use gap for flexbox/grid -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

4. Dark Mode Support

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

<!-- Enable dark mode in config -->
<div class="dark">
  <div class="bg-white dark:bg-gray-900">
    Dark mode enabled
  </div>
</div>

Common Interview Questions

Q: What is the utility-first approach in Tailwind CSS?

Using small, single-purpose utility classes instead of writing custom CSS

Q: How does Tailwind handle responsive design?

Mobile-first approach with responsive prefixes (sm:, md:, lg:, xl:, 2xl:)

Q: How do you customize Tailwind CSS?

Through the tailwind.config.js file, extending theme values, and using @apply directive

Q: What are the performance benefits of Tailwind?

PurgeCSS removes unused CSS, resulting in smaller bundle sizes in production

Q: How do you handle component reusability in Tailwind?

Using @apply directive to create component classes or extracting common patterns

Q: What’s the difference between Tailwind and traditional CSS frameworks?

Tailwind provides utility classes instead of pre-built components, offering more flexibility

Summary

Tailwind CSS provides a comprehensive utility class system
Layout utilities include display, positioning, flexbox, and grid
Spacing utilities use a consistent scale (0.25rem increments)
Typography utilities cover font family, size, weight, and alignment
Color utilities include grayscale and primary color palettes
Responsive utilities use mobile-first breakpoints
State utilities handle hover, focus, active, and disabled states
Custom utilities allow for arbitrary values and component extraction
Best practices ensure maintainable and consistent code

Interview angle

“How do you handle responsive and state variants?” - prefixes composed onto the utility: md:flex, hover:bg-blue-600, dark:text-white, and group-hover:/peer-checked: for parent- and sibling-driven state. Breakpoints are mobile-first, so an unprefixed utility applies at every size.
“How do you apply a value the scale does not have?” - arbitrary values in square brackets, w-[137px]. Useful as an escape hatch; frequent use means the design tokens and the design are out of sync.
“How do you merge conditional classes safely?” - clsx for conditionals plus tailwind-merge to resolve conflicts, since two competing utilities are decided by stylesheet order rather than by which one you passed last. This pairing is what cn() helpers wrap.
“How do you keep long class lists readable?” - the Prettier plugin to sort them deterministically, and component extraction for anything repeated. Sorted classes also make diffs meaningful.

Tailwind CSS Utility Classes

Tailwind CSS Utility Classes

Table of Contents

Layout Utilities

Display

Positioning

Flexbox

Grid

Sizing

Spacing Utilities

Margin

Padding

Typography Utilities

Font Family

Font Size

Font Weight

Text Alignment

Text Decoration

Text Transform

Line Height

Color Utilities

Background Colors

Text Colors

Border Colors

Responsive Utilities

Responsive Prefixes

Breakpoint Examples

State Utilities

Hover States

Focus States

Active States

Disabled States

Custom Utilities

Arbitrary Values

@apply Directive

Best Practices

1. Use Semantic Class Names

2. Responsive Design Patterns

3. Consistent Spacing

4. Dark Mode Support

Common Interview Questions

Summary

Interview angle