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:

html

<!-- 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:

html

<!-- 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:

html

<!-- 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:

html

<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:

html

<!-- 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:

html

<!-- 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

html

<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

html

<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

html

<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

html

<!-- 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

html

<!-- 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

html

<!-- 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

html

<!-- 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

html

<!-- 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

html

<!-- 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

html

<!-- 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

tailwind-utility-classes

NPX Install

Tags

SKILL.md Content

Tailwind CSS - Utility Classes

Key Concepts

Utility-First Approach

Core Utility Categories

Layout

Spacing

Typography

Colors & Backgrounds

Borders & Shadows

Effects

Best Practices

1. Responsive Design with Breakpoints

2. State Variants

3. Dark Mode

4. Arbitrary Values

5. Class Organization

Examples

Card Component

Responsive Navigation

Grid Layout

Common Patterns

Centering Content

Truncating Text

Aspect Ratios

Anti-Patterns

❌ Don't Use Inline Styles

❌ Don't Create Unnecessary Wrapper Divs

❌ Don't Overuse Arbitrary Values

❌ Don't Forget Mobile-First

Related Skills