TailwindCSS Complete Guide – Blog by Bidur Sapkota

Setup via CDN
Colors
Height and Width
Borders
Margin
Padding
Box Sizing
Block vs Inline
Display Property
Border Radius
Text Properties
Font Properties
Centering Elements
Background Images
RGBA and Opacity
Gradients
Shadows
Pseudo Classes
Transitions
Positioning
Pseudo Elements
Flexbox Layout
Grid Layout
Media Query
Theming
Animation

Setup via CDN

Add the Play CDN script to your HTML

Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your content.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

Colors

TailwindCSS provides a comprehensive color system with predefined color palettes and utilities for text, background, and border colors.

Color Utilities

Text Colors: text-{color}-{shade}
Background Colors: bg-{color}-{shade}
Border Colors: border-{color}-{shade}

Examples

<!-- Text Colors -->
<p class="text-red-500">Red text</p>
<p class="text-blue-700">Blue text</p>
<p class="text-green-400">Green text</p>

<!-- Background Colors -->
<div class="bg-purple-600">Purple background</div>
<div class="bg-yellow-200">Light yellow background</div>

<!-- Border Colors -->
<div class="border border-gray-500">Gray border</div>
<div class="border-2 border-indigo-800">Thick indigo border</div>

Color Scale

Colors range from 50 (lightest) to 950 (darkest):

50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Height and Width

Control the dimensions of elements using height and width utilities.

Width Utilities

Fixed widths: w-{size} (e.g., w-4, w-8, w-16)
Percentage widths: w-1/2, w-1/3, w-full
Viewport widths: w-screen

Height Utilities

Fixed heights: h-{size} (e.g., h-4, h-8, h-16)
Percentage heights: h-1/2, h-full
Viewport heights: h-screen

Examples

<!-- Width Examples -->
<div class="w-32 bg-blue-300">Fixed width (128px)</div>
<div class="w-1/2 bg-green-300">Half width</div>
<div class="w-full bg-red-300">Full width</div>

<!-- Height Examples -->
<div class="h-16 bg-purple-300">Fixed height (64px)</div>
<div class="h-screen bg-yellow-300">Full viewport height</div>

<!-- Min/Max Dimensions -->
<div class="min-w-0 max-w-sm min-h-0 max-h-64">Constrained dimensions</div>

Borders

Add borders with various styles, widths, and colors.

Border Width

border - 1px border on all sides
border-2, border-4, border-8 - Different thicknesses
border-t, border-r, border-b, border-l - Specific sides

Border Styles

border-solid
border-dashed
border-dotted
border-double

Examples

<!-- Basic Borders -->
<div class="border border-gray-400">Default border</div>
<div class="border-2 border-blue-500">Thick blue border</div>

<!-- Specific Sides -->
<div class="border-t-4 border-red-500">Top border only</div>
<div class="border-l-2 border-green-500">Left border only</div>

<!-- Border Styles -->
<div class="border-2 border-dashed border-purple-500">Dashed border</div>
<div class="border-2 border-dotted border-yellow-500">Dotted border</div>

Margin

Control the margin (external spacing) of elements.

Margin Utilities

All sides: m-{size}
Horizontal: mx-{size}
Vertical: my-{size}
Individual sides: mt-{size}, mr-{size}, mb-{size}, ml-{size}

Examples

<!-- All sides margin -->
<div class="m-4 bg-blue-200">Margin on all sides</div>

<!-- Directional margins -->
<div class="mx-auto bg-green-200">Centered with auto horizontal margin</div>
<div class="my-8 bg-red-200">Vertical margin only</div>

<!-- Individual sides -->
<div class="mt-6 mr-4 mb-2 ml-8 bg-purple-200">Different margins per side</div>

<!-- Negative margins -->
<div class="-m-2 bg-yellow-200">Negative margin</div>

Padding

Control the padding (internal spacing) of elements.

Padding Utilities

All sides: p-{size}
Horizontal: px-{size}
Vertical: py-{size}
Individual sides: pt-{size}, pr-{size}, pb-{size}, pl-{size}

Examples

<!-- All sides padding -->
<div class="p-6 bg-blue-100">Padding on all sides</div>

<!-- Directional padding -->
<div class="px-4 py-2 bg-green-100">Horizontal and vertical padding</div>

<!-- Individual sides -->
<div class="pt-8 pr-6 pb-4 pl-2 bg-red-100">Different padding per side</div>

Box Sizing

Control how the total width and height of elements are calculated.

Box Sizing Utilities

box-border - Include padding and border in element's total width/height
box-content - Exclude padding and border from element's total width/height

Examples

<!-- Border box (default in Tailwind) -->
<div class="box-border w-32 p-4 border-4 bg-blue-200">Border box sizing</div>

<!-- Content box -->
<div class="box-content w-32 p-4 border-4 bg-green-200">Content box sizing</div>

Block vs Inline

Understanding the difference between block and inline elements.

Block Elements

Take up full width available
Start on new line
Can have width, height, margin, and padding

Inline Elements

Take up only necessary width
Don't break to new line
Cannot have width/height set

Examples

<!-- Block elements -->
<div class="block bg-blue-200">Block element (default for div)</div>
<span class="block bg-green-200">Span as block element</span>

<!-- Inline elements -->
<div class="inline bg-red-200">Div as inline element</div>
<span class="inline bg-yellow-200">Inline element (default for span)</span>

<!-- Inline-block -->
<div class="inline-block w-32 h-16 bg-purple-200">Inline-block element</div>

Display Property

Control the display behavior of elements.

Display Utilities

block - Block-level element
inline - Inline element
inline-block - Inline element with block properties
flex - Flexbox container
grid - Grid container
hidden - Hide element
table, table-row, table-cell - Table display modes

Examples

<!-- Different display types -->
<div class="block bg-blue-200">Block display</div>
<span class="inline-block w-20 h-8 bg-green-200">Inline-block</span>
<div class="flex bg-red-200">Flex container</div>
<div class="grid grid-cols-2 bg-yellow-200">Grid container</div>

<!-- Hide/show elements -->
<div class="hidden">Hidden element</div>
<div class="block sm:hidden">Visible on mobile, hidden on larger screens</div>

Border Radius

Create rounded corners on elements.

Border Radius Utilities

rounded - Default border radius
rounded-{size} - Specific radius sizes
rounded-{corner} - Individual corners
rounded-full - Perfect circle/pill shape

Examples

<!-- Basic rounded corners -->
<div class="rounded bg-blue-200 p-4">Slightly rounded</div>
<div class="rounded-lg bg-green-200 p-4">Large rounded corners</div>
<div class="rounded-full w-16 h-16 bg-red-200">Perfect circle</div>

<!-- Individual corners -->
<div class="rounded-tl-lg rounded-br-lg bg-purple-200 p-4">
  Top-left and bottom-right rounded
</div>

<!-- Different sizes -->
<div class="rounded-none bg-yellow-200 p-2">No rounding</div>
<div class="rounded-sm bg-indigo-200 p-2">Small rounding</div>
<div class="rounded-xl bg-pink-200 p-2">Extra large rounding</div>

Text Properties

Control text appearance, alignment, and behavior.

Text Alignment

text-left, text-center, text-right, text-justify

Text Decoration

underline, line-through, no-underline

Text Transform

uppercase, lowercase, capitalize, normal-case

Text Overflow

truncate, text-ellipsis, text-clip

Examples

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

<!-- Text Decoration -->
<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>

<!-- Text Transform -->
<p class="uppercase">uppercase text</p>
<p class="lowercase">LOWERCASE TEXT</p>
<p class="capitalize">capitalize each word</p>

<!-- Text Overflow -->
<p class="w-32 truncate">This text will be truncated with ellipsis</p>

Font Properties

Control typography including font family, size, weight, and style.

Font Family

font-sans - Sans-serif font stack
font-serif - Serif font stack
font-mono - Monospace font stack

Font Weight

font-thin, font-light, font-normal, font-medium, font-semibold, font-bold, font-black

Font Style

italic, not-italic

Examples

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

<!-- Font Sizes -->
<p class="text-xs">Extra small text</p>
<p class="text-base">Base text size</p>
<p class="text-2xl">Large text</p>
<p class="text-6xl">Extra large text</p>

<!-- Font Weights -->
<p class="font-light">Light weight</p>
<p class="font-normal">Normal weight</p>
<p class="font-bold">Bold weight</p>
<p class="font-black">Black weight</p>

<!-- Font Style -->
<p class="italic">Italic text</p>
<p class="not-italic font-serif">Not italic serif</p>

Centering Elements

Various methods to center elements horizontally and vertically.

Horizontal Centering

mx-auto - Auto margins for block elements
text-center - Center inline/text content
flex justify-center - Flexbox centering

Vertical Centering

flex items-center - Flexbox vertical centering
grid place-items-center - Grid centering

Examples

<!-- Horizontal centering -->
<div class="w-32 mx-auto bg-blue-200">Centered with auto margin</div>

<div class="text-center">
  <span class="bg-green-200">Centered text</span>
</div>

<!-- Flexbox centering -->
<div class="flex justify-center items-center h-32 bg-red-100">
  <div class="bg-red-400 p-4">Centered both ways</div>
</div>

<!-- Grid centering -->
<div class="grid place-items-center h-32 bg-purple-100">
  <div class="bg-purple-400 p-4">Grid centered</div>
</div>

<!-- Absolute centering -->
<div class="relative h-32 bg-yellow-100">
  <div
    class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400 p-4"
  >
    Absolutely centered
  </div>
</div>

Background Images

Apply and control background images on elements.

Background Utilities

bg-{image} - Background image
bg-cover, bg-contain, bg-auto - Background size
bg-center, bg-top, bg-bottom, etc. - Background position
bg-repeat, bg-no-repeat - Background repeat
bg-fixed, bg-scroll - Background attachment

Examples

<!-- Background size -->
<div
  class="h-32 bg-cover bg-center bg-blue-500"
  style="background-image: url('image.jpg')"
>
  Cover background
</div>

<div
  class="h-32 bg-contain bg-center bg-no-repeat bg-green-100"
  style="background-image: url('image.jpg')"
>
  Contain background
</div>

<!-- Background position -->
<div class="h-32 bg-top bg-red-100" style="background-image: url('image.jpg')">
  Top positioned background
</div>

RGBA and Opacity

Control transparency and opacity of elements.

Opacity Utilities

opacity-{value} - Where value is 0, 25, 50, 75, 100

Color Opacity

Colors can include opacity: bg-blue-500/50 (50% opacity)

Examples

<!-- Element opacity -->
<div class="opacity-100 bg-blue-500 p-4">Fully opaque</div>
<div class="opacity-75 bg-blue-500 p-4">75% opacity</div>
<div class="opacity-50 bg-blue-500 p-4">50% opacity</div>
<div class="opacity-25 bg-blue-500 p-4">25% opacity</div>

<!-- Color with opacity -->
<div class="bg-red-500/50 p-4">Background with 50% opacity</div>
<div class="text-green-600/75">Text with 75% opacity</div>
<div class="border border-purple-400/30">Border with 30% opacity</div>

Gradients

Create beautiful gradient backgrounds.

Gradient Utilities

bg-gradient-to-{direction} - Gradient direction
from-{color} - Starting color
via-{color} - Middle color (optional)
to-{color} - Ending color

Gradient Directions

bg-gradient-to-r - Left to right
bg-gradient-to-l - Right to left
bg-gradient-to-t - Bottom to top
bg-gradient-to-b - Top to bottom
bg-gradient-to-tr, bg-gradient-to-tl, etc. - Diagonal

Examples

<!-- Basic gradients -->
<div class="h-32 bg-gradient-to-r from-blue-400 to-purple-500">
  Left to right gradient
</div>

<div class="h-32 bg-gradient-to-b from-green-400 to-blue-500">
  Top to bottom gradient
</div>

<!-- Three-color gradient -->
<div class="h-32 bg-gradient-to-r from-red-400 via-yellow-400 to-pink-400">
  Three-color gradient
</div>

<!-- Diagonal gradient -->
<div class="h-32 bg-gradient-to-br from-purple-400 to-pink-400">
  Diagonal gradient
</div>

Shadows

Add depth with box shadows and drop shadows.

Box Shadow Utilities

shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl
shadow-inner - Inner shadow
shadow-none - Remove shadow

Colored Shadows

shadow-{color}-{intensity}/{opacity}

Examples

<!-- Basic shadows -->
<div class="shadow-sm bg-white p-4 m-4">Small shadow</div>
<div class="shadow bg-white p-4 m-4">Default shadow</div>
<div class="shadow-lg bg-white p-4 m-4">Large shadow</div>
<div class="shadow-2xl bg-white p-4 m-4">Extra large shadow</div>

<!-- Inner shadow -->
<div class="shadow-inner bg-gray-100 p-4 m-4">Inner shadow</div>

<!-- Colored shadows -->
<div class="shadow-lg shadow-blue-500/50 bg-white p-4 m-4">Blue shadow</div>
<div class="shadow-xl shadow-red-500/25 bg-white p-4 m-4">Red shadow</div>

Pseudo Classes

Style elements based on their state or position.

State Pseudo Classes

hover: - Mouse over
focus: - Element focused
active: - Element activated
disabled: - Disabled elements
checked: - Checked inputs

Positional Pseudo Classes

first: - First child
last: - Last child
odd: - Odd children
even: - Even children

Examples

<!-- State pseudo classes -->
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2">
  Hover me
</button>

<input
  class="border focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-2"
  type="text"
  placeholder="Focus me"
/>

<button class="bg-green-500 active:bg-green-800 text-white px-4 py-2">
  Click me
</button>

<!-- Positional pseudo classes -->
<ul class="space-y-2">
  <li class="first:text-green-600 last:text-red-600 odd:bg-gray-100">Item 1</li>
  <li class="first:text-green-600 last:text-red-600 odd:bg-gray-100">Item 2</li>
  <li class="first:text-green-600 last:text-red-600 odd:bg-gray-100">Item 3</li>
  <li class="first:text-green-600 last:text-red-600 odd:bg-gray-100">Item 4</li>
</ul>

<!-- Group hover -->
<div class="group bg-white hover:bg-gray-100 p-4 border">
  <h3 class="group-hover:text-blue-600">Hover the card</h3>
  <p class="group-hover:text-gray-600">This text changes too</p>
</div>

Transitions

Create smooth animations between state changes.

Transition Utilities

transition - Transition all properties
transition-{property} - Specific properties
duration-{time} - Transition duration
ease-{timing} - Timing function
delay-{time} - Transition delay

Transition Properties

transition-all - All properties
transition-colors - Color properties
transition-opacity - Opacity only
transition-transform - Transform only

Examples

<!-- Basic transitions -->
<button
  class="bg-blue-500 hover:bg-blue-700 transition duration-300 text-white px-4 py-2"
>
  Smooth color transition
</button>

<div
  class="w-16 h-16 bg-red-500 hover:scale-110 transition-transform duration-500"
>
  Scale on hover
</div>

<!-- Different transition properties -->
<div class="opacity-50 hover:opacity-100 transition-opacity duration-700">
  Opacity transition
</div>

<div
  class="transform rotate-0 hover:rotate-45 transition-transform duration-300"
>
  Rotation transition
</div>

<!-- Custom timing -->
<button
  class="bg-green-500 hover:bg-green-700 transition-colors duration-1000 ease-in-out delay-150 text-white px-4 py-2"
>
  Custom timing
</button>

Positioning

Control element positioning with static, relative, absolute, fixed, and sticky positioning.

Position Utilities

static - Default positioning
relative - Relative positioning
absolute - Absolute positioning
fixed - Fixed positioning
sticky - Sticky positioning

Position Values

top-{value}, right-{value}, bottom-{value}, left-{value}
inset-{value} - All sides
inset-x-{value}, inset-y-{value} - Horizontal/vertical

Examples

<!-- Relative positioning -->
<div class="relative bg-blue-100 h-32 p-4">
  Relative container
  <div class="absolute top-2 right-2 bg-blue-500 text-white p-2">
    Absolute positioned
  </div>
</div>

<!-- Fixed positioning -->
<div class="fixed top-4 right-4 bg-red-500 text-white p-2 z-50">
  Fixed element
</div>

<!-- Sticky positioning -->
<div class="sticky top-0 bg-yellow-400 p-2 z-40">Sticky header</div>

<!-- Centering with absolute positioning -->
<div class="relative h-32 bg-gray-100">
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="bg-white p-4 shadow">Centered content</div>
  </div>
</div>

Pseudo Elements

Style pseudo elements like ::before and ::after.

Pseudo Element Utilities

before: - Style ::before pseudo element
after: - Style ::after pseudo element

Content

Use before:content-[''] or after:content-[''] to add content

Examples

<!-- Before and after pseudo elements -->
<div
  class="relative before:content-['→'] before:absolute before:-left-4 before:text-blue-500"
>
  Text with arrow before
</div>

<div
  class="relative after:content-['✓'] after:absolute after:-right-4 after:text-green-500"
>
  Text with checkmark after
</div>

<!-- Decorative elements -->
<h2
  class="relative text-center before:content-[''] before:absolute before:top-1/2 before:left-0 before:w-1/4 before:h-px before:bg-gray-300 after:content-[''] after:absolute after:top-1/2 after:right-0 after:w-1/4 after:h-px after:bg-gray-300"
>
  Decorated heading
</h2>

<!-- Overlay effects -->
<div
  class="relative bg-blue-500 text-white p-8 before:content-[''] before:absolute before:inset-0 before:bg-black before:opacity-25"
>
  <div class="relative z-10">Content with overlay</div>
</div>

Flexbox Layout

Create flexible, responsive layouts using flexbox.

Flex Container

flex - Create flex container
inline-flex - Inline flex container

Flex Direction

flex-row - Horizontal (default)
flex-col - Vertical
flex-row-reverse, flex-col-reverse - Reversed

Justify Content (main axis)

justify-start, justify-center, justify-end
justify-between, justify-around, justify-evenly

Align Items (cross axis)

items-start, items-center, items-end
items-stretch, items-baseline

Examples

<!-- Basic flex layout -->
<div class="flex space-x-4">
  <div class="bg-blue-200 p-4">Item 1</div>
  <div class="bg-green-200 p-4">Item 2</div>
  <div class="bg-red-200 p-4">Item 3</div>
</div>

<!-- Centered content -->
<div class="flex justify-center items-center h-32 bg-gray-100">
  <div class="bg-white p-4 shadow">Centered</div>
</div>

<!-- Space distribution -->
<div class="flex justify-between bg-purple-100 p-4">
  <div class="bg-purple-300 p-2">Left</div>
  <div class="bg-purple-300 p-2">Center</div>
  <div class="bg-purple-300 p-2">Right</div>
</div>

<!-- Flex item properties -->
<div class="flex bg-yellow-100 p-4">
  <div class="flex-1 bg-yellow-300 p-2">Grows</div>
  <div class="flex-none bg-yellow-400 p-2 w-32">Fixed width</div>
  <div class="flex-shrink bg-yellow-500 p-2">Shrinks</div>
</div>

<!-- Column layout -->
<div class="flex flex-col h-64 bg-indigo-100 p-4">
  <div class="bg-indigo-300 p-2">Header</div>
  <div class="flex-1 bg-indigo-200 p-2">Content (grows)</div>
  <div class="bg-indigo-300 p-2">Footer</div>
</div>

Grid Layout

Create complex, two-dimensional layouts with CSS Grid.

Grid Container

grid - Create grid container
inline-grid - Inline grid container

Grid Template Columns

grid-cols-{n} - Number of columns
grid-cols-none - No explicit columns

Grid Template Rows

grid-rows-{n} - Number of rows
grid-rows-none - No explicit rows

Grid Gaps

gap-{size} - Gap between items
gap-x-{size}, gap-y-{size} - Horizontal/vertical gaps

Examples

<!-- Basic grid -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-200 p-4">1</div>
  <div class="bg-green-200 p-4">2</div>
  <div class="bg-red-200 p-4">3</div>
  <div class="bg-yellow-200 p-4">4</div>
  <div class="bg-purple-200 p-4">5</div>
</div>

<!-- Auto-fit and auto-fill -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <div class="bg-indigo-200 p-4">Auto-fit item 1</div>
  <div class="bg-indigo-300 p-4">Auto-fit item 2</div>
  <div class="bg-indigo-400 p-4">Auto-fit item 3</div>
</div>

Media Query

Create responsive designs that adapt to different screen sizes.

Responsive Breakpoints

sm: - 640px and up
md: - 768px and up
lg: - 1024px and up
xl: - 1280px and up
2xl: - 1536px and up

Mobile-First Approach

Tailwind uses a mobile-first approach where unprefixed utilities apply to all screen sizes, and prefixed utilities apply from that breakpoint up.

Examples

<!-- Basic responsive design -->
<div
  class="bg-red-500 sm:bg-blue-500 md:bg-green-500 lg:bg-yellow-500 xl:bg-purple-500 p-4"
>
  Different colors at different breakpoints
</div>

<!-- Responsive grid -->
<div
  class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
>
  <div class="bg-blue-200 p-4">Item 1</div>
  <div class="bg-green-200 p-4">Item 2</div>
  <div class="bg-red-200 p-4">Item 3</div>
  <div class="bg-yellow-200 p-4">Item 4</div>
</div>

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

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

<!-- Hide/show at different breakpoints -->
<div class="block md:hidden bg-blue-200 p-4">
  Visible on mobile, hidden on desktop
</div>
<div class="hidden md:block bg-green-200 p-4">
  Hidden on mobile, visible on desktop
</div>

<!-- Responsive flexbox -->
<div class="flex flex-col sm:flex-row gap-4">
  <div class="bg-purple-200 p-4">Stacked on mobile</div>
  <div class="bg-pink-200 p-4">Side by side on desktop</div>
</div>

Theming

Use dark: for adding dark mode style.

<!-- Dark mode classes -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
  Light background, dark in dark mode
</div>

<button
  class="bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 text-white px-4 py-2"
>
  Dark mode aware button
</button>

Animation

Create engaging animations and keyframe-based effects.

Built-in Animations

animate-spin - Continuous rotation
animate-ping - Scaling ping effect
animate-pulse - Pulsing opacity
animate-bounce - Bouncing motion

Custom Animations

You can create custom animations using Tailwind's animation utilities and keyframes.

Transform Utilities

scale-{value} - Scale elements
rotate-{degrees} - Rotate elements
translate-x-{value}, translate-y-{value} - Move elements
skew-x-{degrees}, skew-y-{degrees} - Skew elements

Examples

<!-- Built-in animations -->
<div class="animate-spin w-8 h-8 bg-blue-500 mb-4"></div>
<div class="animate-ping w-4 h-4 bg-red-500 rounded-full mb-4"></div>
<div class="animate-pulse w-32 h-8 bg-gray-300 rounded mb-4"></div>
<div class="animate-bounce w-8 h-8 bg-yellow-500 rounded-full mb-4"></div>

<!-- Transform effects -->
<div
  class="w-16 h-16 bg-purple-500 transform hover:scale-110 transition-transform duration-300 mb-4"
>
  Hover to scale
</div>

<div
  class="w-16 h-16 bg-green-500 transform hover:rotate-45 transition-transform duration-500 mb-4"
>
  Hover to rotate
</div>

<div
  class="w-16 h-16 bg-red-500 transform hover:translate-x-4 hover:-translate-y-2 transition-transform duration-300 mb-4"
>
  Hover to move
</div>

<!-- Combining animations with interactions -->
<button
  class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg transform hover:scale-105 active:scale-95 transition-all duration-150"
>
  Interactive button
</button>

<!-- Loading spinner example -->
<div class="flex items-center space-x-2">
  <div
    class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"
  ></div>
  <span>Loading...</span>
</div>

<!-- Staggered animation effect -->
<div class="space-y-2">
  <div class="w-full h-4 bg-gray-200 rounded animate-pulse"></div>
  <div
    class="w-3/4 h-4 bg-gray-200 rounded animate-pulse"
    style="animation-delay: 0.1s;"
  ></div>
  <div
    class="w-1/2 h-4 bg-gray-200 rounded animate-pulse"
    style="animation-delay: 0.2s;"
  ></div>
</div>

<!-- Hover group animations -->
<div
  class="group bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300"
>
  <div
    class="w-12 h-12 bg-blue-500 rounded-lg group-hover:scale-110 group-hover:rotate-12 transition-transform duration-300 mb-4"
  ></div>
  <h3
    class="text-lg font-semibold group-hover:text-blue-600 transition-colors duration-300"
  >
    Animated Card
  </h3>
  <p
    class="text-gray-600 group-hover:text-gray-800 transition-colors duration-300"
  >
    Hover me to see the animation
  </p>
</div>

Complete TailwindCSS Guide

Table of Contents

Setup via CDN

Add the Play CDN script to your HTML

Colors

Color Utilities

Examples

Color Scale

Height and Width

Width Utilities

Height Utilities

Examples

Borders

Border Width

Border Styles

Examples

Margin

Margin Utilities

Examples

Padding

Padding Utilities

Examples

Box Sizing

Box Sizing Utilities

Examples

Block vs Inline

Block Elements

Inline Elements

Examples

Display Property

Display Utilities

Examples

Border Radius

Border Radius Utilities

Examples

Text Properties

Text Alignment

Text Decoration

Text Transform

Text Overflow

Examples

Font Properties

Font Family

Font Size

Font Weight

Font Style

Examples

Centering Elements

Horizontal Centering

Vertical Centering

Examples

Background Images

Background Utilities

Examples

RGBA and Opacity

Opacity Utilities

Color Opacity

Examples

Gradients

Gradient Utilities

Gradient Directions

Examples

Shadows

Box Shadow Utilities

Colored Shadows

Examples

Pseudo Classes

State Pseudo Classes

Positional Pseudo Classes

Examples

Transitions

Transition Utilities

Transition Properties

Examples

Positioning

Position Utilities

Position Values

Examples

Pseudo Elements

Pseudo Element Utilities