Master Tailwind CSS

The utility-first CSS framework that lets you build designs without leaving your HTML

Tailwind CSS Index

Navigate through essential Tailwind topics

1

Why Use Tailwind

2

Core Concepts

3

Common Utilities

4

Tailwind vs CSS

5

Customization

Click any topic to jump to section

From CSS to Tailwind

How Tailwind CSS revolutionizes the way we style websites

Traditional CSS Approach

With traditional CSS, you write styles in a separate stylesheet and reference them with class names:

  • Create a CSS file with your styles
  • Write selectors and properties
  • Link the stylesheet to your HTML
  • Add class names to HTML elements
  • Repeat for every component
styles.css
/* Traditional CSS Example */
.card {
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1e40af;
}

CSS vs Tailwind Examples

See the difference between traditional CSS and Tailwind in common UI patterns

Traditional CSS Login Form

/* CSS for login form */
        .login-form {
          max-width: 400px;
          margin: 2rem auto;
          padding: 2rem;
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
HTML
<div class="login-form">
          <h2>Login</h2>
          <form>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" id="email" />
            </div>
            <button type="submit">Sign In</button>
          </form>
        </div>

Tailwind CSS Login Form

<!-- Tailwind login form -->
        <div class="max-w-md mx-auto p-6 sm:p-8 bg-white rounded-lg shadow-md">
          <h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Login</h2>
          <form>
            <div class="mb-4 sm:mb-6">
              <label class="block text-gray-700 mb-2">Email</label>
              <input class="w-full px-3 py-2 border rounded-md" type="email" />
            </div>
            <button class="w-full bg-blue-700 text-white py-2 px-4 rounded-md">
              Sign In
            </button>
          </form>
        </div>

Login

Common Tailwind CSS Classes

Quick reference for the most frequently used Tailwind utility classes

Layout & Structure

  • containerCenters content with max-width
  • mx-autoHorizontal centering
  • flexDisplay flex
  • gridDisplay grid
  • blockDisplay block
  • hiddenDisplay none
  • relativePosition relative
  • absolutePosition absolute

Spacing

  • m-4Margin all sides (1rem)
  • p-4Padding all sides (1rem)
  • gap-4Gap between items
  • mt-4Margin top (1rem)
  • mb-4Margin bottom (1rem)
  • ml-4Margin left (1rem)
  • mr-4Margin right (1rem)
  • px-4Padding left & right (1rem)

Sizing

  • w-fullFull width
  • h-screenFull viewport height
  • w-1/250% width
  • min-h-screenMinimum viewport height
  • max-w-mdMax-width 28rem (448px)
  • w-autoWidth auto
  • h-12Height 3rem (48px)
  • min-w-maxMinimum width max-content

Typography

  • text-xlExtra large text
  • font-boldFont weight bold
  • text-centerText align center
  • uppercaseText uppercase
  • leading-relaxedLine height 1.625
  • tracking-wideLetter spacing 0.025em
  • underlineText underline
  • italicText italic

Colors & Backgrounds

  • bg-whiteWhite background
  • text-gray-600Gray text color
  • bg-blue-500Blue background
  • text-red-500Red text color
  • bg-opacity-50Background opacity 50%
  • bg-gradient-to-rRight gradient
  • hover:bg-gray-100Hover gray background
  • focus:ring-2Focus ring

Borders & Effects

  • rounded-lgLarge border radius
  • shadow-mdMedium shadow
  • borderDefault border
  • border-22px border
  • border-blue-500Blue border
  • ring-2Focus ring
  • transition-allSmooth transitions
  • hover:shadow-lgHover larger shadow

Tailwind CSS Features

Why Tailwind is the perfect CSS framework for modern web development

Utility-First

Build any design directly in your HTML with thousands of utility classes.

Responsive Design

Easy responsive design with built-in breakpoint prefixes like md: and lg:.

Customizable

Configure colors, spacing, fonts and more in the config file.

Component-Friendly

Extract component classes with @apply or use with React/Vue components.

Design Consistency

Built-in design system ensures spacing, colors and typography are consistent.

Performance

Purge unused styles in production for optimal performance.

Ready to Learn Tailwind?

Start creating beautiful, responsive designs faster than ever with Tailwind CSS.

Official Tailwind Docs