Styling with Tailwind CSS

Overview

Live Pages have full support for Tailwind CSS, a utility-first CSS framework that allows you to rapidly build modern user interfaces. Tailwind CSS is pre-loaded and available for use without any additional setup.

Benefits of Tailwind in Live Pages

Rapid prototyping: Build interfaces quickly without writing custom CSS
Consistent design: Use Tailwind's design system for cohesive styling
Responsive by default: Built-in responsive utilities
No CSS conflicts: Utility classes eliminate CSS specificity issues
No setup required: Tailwind is automatically available

Basic Usage

Simply use Tailwind utility classes in your HTML:

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-2">Welcome</h2>
    <p class="text-blue-100">This is styled with Tailwind CSS</p>
</div>

Common Utility Classes

Layout

<!-- Container -->
<div class="container mx-auto p-6">
    Content centered with padding
</div>

<!-- Flexbox -->
<div class="flex justify-between items-center gap-4">
    <div>Left</div>
    <div>Right</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</div>

<!-- Spacing -->
<div class="p-4 m-2">      <!-- Padding 1rem, Margin 0.5rem -->
<div class="px-6 py-3">    <!-- Horizontal/Vertical padding -->
<div class="mt-4 mb-2">    <!-- Margin top/bottom -->

Typography

<!-- Text Size -->
<h1 class="text-4xl">Large Heading</h1>
<h2 class="text-2xl">Medium Heading</h2>
<p class="text-base">Normal text</p>
<small class="text-sm">Small text</small>

<!-- Text Weight & Style -->
<p class="font-bold">Bold text</p>
<p class="font-semibold">Semi-bold text</p>
<p class="font-normal">Normal text</p>
<p class="italic">Italic text</p>

<!-- Text Color -->
<p class="text-gray-900">Dark gray</p>
<p class="text-blue-500">Blue</p>
<p class="text-red-600">Red</p>

<!-- Text Alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Centered</p>
<p class="text-right">Right aligned</p>

Colors

<!-- Background Colors -->
<div class="bg-blue-500">Blue background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-red-600">Red background</div>

<!-- Text Colors -->
<p class="text-blue-500">Blue text</p>
<p class="text-gray-700">Gray text</p>

<!-- Border Colors -->
<div class="border border-blue-500">Blue border</div>

Borders & Shadows

<!-- Borders -->
<div class="border">Simple border</div>
<div class="border-2">Thicker border</div>
<div class="border-t">Top border only</div>

<!-- Border Radius -->
<div class="rounded">Slightly rounded</div>
<div class="rounded-lg">More rounded</div>
<div class="rounded-full">Fully rounded (pill shape)</div>

<!-- Shadows -->
<div class="shadow">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>

Component Examples

Cards

<!-- Simple Card -->
<div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-2">Card Title</h3>
    <p class="text-gray-600">Card content goes here.</p>
</div>

<!-- Card with Image -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="image.jpg" alt="Card image" class="w-full h-48 object-cover">
    <div class="p-6">
        <h3 class="text-lg font-semibold mb-2">Card with Image</h3>
        <p class="text-gray-600">Description text here.</p>
    </div>
</div>

<!-- Card with Actions -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-2">Task Item</h3>
        <p class="text-gray-600 mb-4">Task description here.</p>
        <div class="flex gap-2">
            <button class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600">
                Edit
            </button>
            <button class="bg-red-500 text-white px-3 py-1 rounded text-sm hover:bg-red-600">
                Delete
            </button>
        </div>
    </div>
</div>

Buttons

<!-- Primary Button -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
    Primary Button
</button>

<!-- Secondary Button -->
<button class="bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300">
    Secondary Button
</button>

<!-- Danger Button -->
<button class="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700">
    Delete
</button>

<!-- Small Button -->
<button class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600">
    Small
</button>

<!-- Disabled Button -->
<button class="bg-gray-400 text-white px-4 py-2 rounded-md cursor-not-allowed opacity-50" disabled>
    Disabled
</button>

<!-- Button Group -->
<div class="flex gap-2">
    <button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
        Save
    </button>
    <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300">
        Cancel
    </button>
</div>

Forms

<!-- Text Input -->
<div class="mb-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">
        Name
    </label>
    <input
        type="text"
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        placeholder="Enter name"
    >
</div>

<!-- Textarea -->
<div class="mb-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">
        Description
    </label>
    <textarea
        rows="4"
        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        placeholder="Enter description"
    ></textarea>
</div>

<!-- Select -->
<div class="mb-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">
        Priority
    </label>
    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        <option>Low</option>
        <option>Medium</option>
        <option>High</option>
    </select>
</div>

<!-- Checkbox -->
<label class="flex items-center">
    <input type="checkbox" class="h-4 w-4 text-blue-600 rounded">
    <span class="ml-2 text-sm text-gray-700">I agree to the terms</span>
</label>

<!-- Radio Buttons -->
<div class="space-y-2">
    <label class="flex items-center">
        <input type="radio" name="option" class="h-4 w-4 text-blue-600">
        <span class="ml-2 text-sm text-gray-700">Option 1</span>
    </label>
    <label class="flex items-center">
        <input type="radio" name="option" class="h-4 w-4 text-blue-600">
        <span class="ml-2 text-sm text-gray-700">Option 2</span>
    </label>
</div>

Lists

<!-- Simple List -->
<ul class="space-y-2">
    <li class="bg-white p-4 rounded shadow">Item 1</li>
    <li class="bg-white p-4 rounded shadow">Item 2</li>
    <li class="bg-white p-4 rounded shadow">Item 3</li>
</ul>

<!-- List with Actions -->
<div class="space-y-2">
    <div class="bg-white p-4 rounded shadow flex justify-between items-center">
        <span>Task item</span>
        <div class="flex gap-2">
            <button class="text-blue-500 text-sm">Edit</button>
            <button class="text-red-500 text-sm">Delete</button>
        </div>
    </div>
</div>

<!-- Striped List -->
<div class="divide-y divide-gray-200">
    <div class="p-4 hover:bg-gray-50">Item 1</div>
    <div class="p-4 hover:bg-gray-50">Item 2</div>
    <div class="p-4 hover:bg-gray-50">Item 3</div>
</div>

Badges & Tags

<!-- Status Badges -->
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">
    Active
</span>
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">
    Inactive
</span>
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">
    Pending
</span>

<!-- Priority Tags -->
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">
    High Priority
</span>
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">
    Medium Priority
</span>
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">
    Low Priority
</span>

Alerts & Notifications

<!-- Success Alert -->
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
    <strong class="font-bold">Success!</strong>
    <span class="block sm:inline">Task created successfully.</span>
</div>

<!-- Error Alert -->
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
    <strong class="font-bold">Error!</strong>
    <span class="block sm:inline">Something went wrong.</span>
</div>

<!-- Warning Alert -->
<div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
    <strong class="font-bold">Warning!</strong>
    <span class="block sm:inline">Please review your changes.</span>
</div>

<!-- Info Alert -->
<div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
    <strong class="font-bold">Info:</strong>
    <span class="block sm:inline">This is an informational message.</span>
</div>

<!-- Modal Overlay -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
    <!-- Modal Content -->
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
        <h3 class="text-lg font-semibold mb-4">Confirm Delete</h3>
        <p class="text-gray-600 mb-6">Are you sure you want to delete this item?</p>
        <div class="flex justify-end gap-2">
            <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">
                Cancel
            </button>
            <button class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
                Delete
            </button>
        </div>
    </div>
</div>

Responsive Design

Tailwind makes responsive design simple with breakpoint prefixes:

sm: - Small screens (640px+)
md: - Medium screens (768px+)
lg: - Large screens (1024px+)
xl: - Extra large screens (1280px+)

<!-- Responsive Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white p-6 rounded-lg shadow">Card 1</div>
    <div class="bg-white p-6 rounded-lg shadow">Card 2</div>
    <div class="bg-white p-6 rounded-lg shadow">Card 3</div>
</div>

<!-- Responsive Text -->
<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold">
    Responsive Heading
</h1>

<!-- Hide/Show on Different Screens -->
<div class="block md:hidden">
    Mobile only
</div>
<div class="hidden md:block">
    Desktop only
</div>

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

Layout Patterns

Two-Column Layout

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Sidebar -->
    <div class="lg:col-span-1">
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-bold mb-4">Sidebar</h2>
            <!-- Sidebar content -->
        </div>
    </div>

    <!-- Main Content -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-lg font-bold mb-4">Main Content</h2>
            <!-- Main content -->
        </div>
    </div>
</div>

Header with Navigation

<header class="bg-white shadow">
    <div class="container mx-auto px-6 py-4">
        <div class="flex justify-between items-center">
            <h1 class="text-2xl font-bold text-gray-800">My App</h1>
            <nav class="flex gap-4">
                <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
                <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
            </nav>
        </div>
    </div>
</header>

Full Page Layout

<div class="min-h-screen bg-gray-100">
    <!-- Header -->
    <header class="bg-white shadow">
        <div class="container mx-auto px-6 py-4">
            <h1 class="text-2xl font-bold">My Application</h1>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-8">
        <div class="bg-white rounded-lg shadow p-6">
            <!-- Your content here -->
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white mt-8">
        <div class="container mx-auto px-6 py-4 text-center">
            <p>&copy; 2024 My Application</p>
        </div>
    </footer>
</div>

Interactive States

Hover Effects

<!-- Hover Background -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    Hover me
</button>

<!-- Hover Scale -->
<div class="transform hover:scale-105 transition duration-200">
    Scales on hover
</div>

<!-- Hover Shadow -->
<div class="shadow hover:shadow-lg transition duration-200">
    Shadow increases on hover
</div>

Focus States

<input
    type="text"
    class="border border-gray-300 px-3 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>

Transitions

<!-- Smooth Transition -->
<button class="bg-blue-500 hover:bg-blue-600 transition duration-300">
    Smooth transition
</button>

<!-- Multiple Properties -->
<div class="transform hover:scale-110 hover:bg-blue-500 transition-all duration-300">
    Multiple transitions
</div>

Best Practices

1. Use Consistent Spacing

Stick to Tailwind's spacing scale:

<!-- ✅ GOOD: Consistent spacing -->
<div class="p-4 m-2">
<div class="p-6 m-4">
<div class="p-8 m-6">

<!-- ❌ AVOID: Arbitrary values -->
<div style="padding: 17px; margin: 13px">

2. Maintain Color Consistency

Use Tailwind's color palette:

<!-- ✅ GOOD: Consistent colors -->
<div class="bg-blue-500 text-white">
<div class="bg-blue-600 text-white">
<div class="bg-blue-700 text-white">

<!-- ❌ AVOID: Custom colors -->
<div style="background: #1E3F8F">

3. Mobile-First Approach

Start with mobile styles, then add breakpoints:

<!-- ✅ GOOD: Mobile-first -->
<div class="text-sm md:text-base lg:text-lg">
    Responsive text
</div>

<!-- ❌ AVOID: Desktop-first -->
<div class="text-lg md:text-sm">
    Wrong approach
</div>

<!-- ✅ GOOD: Logical grouping -->
<button class="
    bg-blue-500 hover:bg-blue-600
    text-white
    px-4 py-2
    rounded-md
    shadow-md hover:shadow-lg
    transition duration-200
">
    Well organized
</button>

5. Use Semantic Class Names for Complex Components

For reusable components, consider wrapper elements:

<div class="task-card">
    <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition">
        <!-- Card content -->
    </div>
</div>

Common Color Schemes

Blue Theme

<div class="bg-blue-500 text-white p-4 rounded">Primary</div>
<div class="bg-blue-600 text-white p-4 rounded">Darker</div>
<div class="bg-blue-100 text-blue-800 p-4 rounded">Light</div>

Success/Error/Warning

<!-- Success (Green) -->
<div class="bg-green-500 text-white p-4 rounded">Success</div>

<!-- Error (Red) -->
<div class="bg-red-500 text-white p-4 rounded">Error</div>

<!-- Warning (Yellow) -->
<div class="bg-yellow-500 text-white p-4 rounded">Warning</div>

<!-- Info (Blue) -->
<div class="bg-blue-500 text-white p-4 rounded">Info</div>

Grayscale

<div class="bg-gray-50 p-4">Very light gray</div>
<div class="bg-gray-100 p-4">Light gray</div>
<div class="bg-gray-200 p-4">Gray</div>
<div class="bg-gray-700 text-white p-4">Dark gray</div>
<div class="bg-gray-900 text-white p-4">Very dark gray</div>

Quick Reference

Spacing Scale

p-1 = 0.25rem (4px)
p-2 = 0.5rem (8px)
p-4 = 1rem (16px)
p-6 = 1.5rem (24px)
p-8 = 2rem (32px)

Common Combinations

<!-- Card -->
<div class="bg-white rounded-lg shadow-md p-6">

<!-- Button -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">

<!-- Input -->
<input class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">

<!-- Badge -->
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">

Resources

Tailwind CSS Documentation: https://tailwindcss.com/docs
Tailwind UI Components: https://tailwindui.com/components
Color Reference: https://tailwindcss.com/docs/customizing-colors

Next Steps

Complete Examples - See Tailwind styling in full applications
Creating Live Pages - Back to main guide
Data Management API Reference - Learn about data operations

22 October 2025