Tailwind CSS Cheat Sheet (Basics to Advanced)

In this Tailwind Cheat Sheet, we’ll explore everything you need to start creating beautiful, responsive designs with Tailwind CSS, a popular utility-first CSS framework. Whether you’re just starting out or looking to deepen your understanding, this cheat sheet covers essential Tailwind CSS features, responsive utilities, and customization options. Let's dive in and discover how to efficiently build web layouts and components using Tailwind.

Getting Started with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level CSS classes to style elements directly in HTML without writing custom CSS.

Core Tailwind CSS Utilities

Tailwind’s utility classes are the backbone of styling elements quickly and effectively. Here’s a breakdown of some essential utilities:

• Text Color: text-blue-500, text-red-600
• Background Color: bg-green-200, bg-gray-700
• Font Size: text-sm, text-xl, text-3xl
• Margin and Padding: m-4, p-2, px-4, py-3
• Flex Utilities: flex, justify-center, items-center

Each utility class allows for quick styling without writing custom CSS, making it easy to achieve consistency across your designs.

Responsive Design with Tailwind

Responsive design is a critical part of web development. Tailwind CSS makes it straightforward by offering responsive prefixes like sm, md, lg, and xl.

  Responsive Text Example

Layout Utilities

Tailwind offers various classes for controlling width, height, display, and positioning. These layout utilities make it easy to structure elements consistently.

• Width: w-1/2, w-full, w-screen
• Height: h-16, h-full, h-screen
• Display: block, inline-block, flex, grid

Example:

  Full-width container

Typography

Tailwind provides robust typography utilities for setting font size, weight, letter spacing, and color.

• Font Size: text-xs, text-lg, text-4xl
• Font Weight: font-light, font-bold, font-extrabold
• Text Color: text-gray-500, text-red-700, text-indigo-900

Example:

  Tailwind Typography Example

Text and Font

Font styling in Tailwind CSS includes size, weight, and alignment:

    Customized Text

• text-{size}: xs, sm, base, lg, xl, etc.
• font-{weight}: thin, normal, bold, extrabold, etc.
• text-{alignment}: left, center, right, justify

Color and Backgrounds

Tailwind CSS includes a comprehensive color palette and utilities to apply colors to various elements. You can add color to text, backgrounds, and borders.

• Text Color: text-blue-600, text-yellow-300
• Background Color: bg-blue-500, bg-red-200
• Border Color: border-green-300

Example:

  Primary Button

Borders and Shadows

Borders and shadows are key for defining the edges and adding depth to components:htm

    Border and Shadow

• border-{size}: 0, 2, 4, 8, etc.
• border-{color}-{shade}: defines border color
• rounded-{size}: rounded corners, e.g., rounded-md, rounded-full
• shadow-{size}: adds shadows, e.g., shadow-sm, shadow-md

Spacing and Sizing

The spacing utility classes provide a consistent system for setting margins and padding. This system makes it easy to maintain spacing harmony across the project.

• Padding: p-4, px-6, py-2
• Margin: m-4, mx-2, my-6

Tailwind also supports negative margins, which are useful for precise layout adjustments:

  Spacing Example with Tailwind

Flexbox and Grid

The Tailwind Flex Cheat Sheet and Tailwind Grid Cheat Sheet are vital for creating flexible and responsive layouts.

Flexbox

• Flex: flex, inline-flex
• Direction: flex-row, flex-col
• Justify Content: justify-start, justify-center, justify-between
• Align Items: items-center, items-end

Example:

  
Flex Item 1

Grid

• Grid: grid
• Columns: grid-cols-1, grid-cols-3, grid-cols-12
• Gap: gap-4, gap-x-2, gap-y-8

Example:

  
Grid Item 1
  
Grid Item 2

Transitions and Animations

Adding animations and transitions to elements is simple with Tailwind. You can create smooth effects for hover, focus, and other states.

• Transition: transition, duration-300, ease-in-out
• Hover State: hover:bg-blue-700, hover:scale-105
• Transforms: rotate-45, scale-110

Example:

  Hover Me

Customizing Tailwind CSS

Tailwind allows extensive customization through tailwind.config.js. You can add custom colors, fonts, and extend the default spacing or breakpoints.

Adding Custom Colors

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1c92d2',
      },
    },
  },
}

You can then use bg-customBlue or text-customBlue in your HTML.

Advanced Components

Buttons

Buttons in Tailwind CSS are easy to style with background colors, padding, borders, and rounded corners:

    Tailwind Button

• hover:bg-{color}-{shade}: changes color on hover
• font-{weight} and py-{size} px-{size}: controls font and padding

Forms

Tailwind’s form components include input styling, labels, and helpers:

• border-{color}-{shade} and rounded-{size}: controls border styling
• focus:border-{color}-{shade}: styles input borders when focused

Cards

Cards are essential for displaying grouped information:

    
    

        
Card Title
        
Card Content
    

• max-w-{size}: controls maximum width
• shadow-{size} and rounded-{size}: adds shadow and rounds corners

Modals

Modals are used for pop-ups and overlays:

    

        Modal Content
    

• fixed and inset-0: positions modal to cover the screen
• bg-opacity-{value}: controls background overlay transparency

Interactivity and Animation

Tailwind provides classes for adding interactive styles and animations:

    Animated Element

• transition and duration-{value}: enables transitions and controls speed
• hover:scale-{value}: enlarges elements on hover
• transform with rotate-{value}, translate-{value}, etc., creates custom transformations

Animation Classes

Tailwind’s built-in animation classes include fading, spinning, and bouncing:

    Bouncing Element

.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}