Styling with Tailwind CSS

When AI generates a React or Next.js app, the styling almost always uses Tailwind CSS. Instead of writing CSS in separate files, you apply styles directly in your JSX using utility classes. It's fast, consistent, and AI tools love it.

What is Utility-First CSS?

Traditional CSS: write classes with custom names, define styles in a separate file.

Tailwind CSS: apply pre-built utility classes directly to your HTML/JSX.

// Traditional CSS approach
// styles.css: .card { padding: 16px; border: 1px solid #e5e7eb; border-radius: 8px; }
<div className="card">Content</div>

// Tailwind CSS approach — no separate CSS file needed
<div className="p-4 border border-gray-200 rounded-lg">Content</div>

Every Tailwind class does one thing:

• p-4 = padding on all sides
• border = add a border
• border-gray-200 = light gray border color
• rounded-lg = large border radius

Layout Classes

Flexbox

Flexbox is the most common layout tool in Tailwind:

// Horizontal layout
<div className="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

// Centered content
<div className="flex items-center justify-center h-screen">
  <h1>Perfectly Centered</h1>
</div>

// Space between items
<div className="flex items-center justify-between">
  <span>Logo</span>
  <nav>Links</nav>
</div>

// Column layout
<div className="flex flex-col gap-2">
  <input placeholder="Name" />
  <input placeholder="Email" />
  <button>Submit</button>
</div>

// Wrap items
<div className="flex flex-wrap gap-4">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

CSS Grid

For more complex layouts:

// 3-column grid
<div className="grid grid-cols-3 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

// Responsive grid — 1 col on mobile, 2 on tablet, 3 on desktop
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {products.map(product => <ProductCard key={product.id} {...product} />)}
</div>

Spacing: Padding and Margin

Tailwind uses a numeric scale where each number = 4px (0.25rem):

// Padding
<div className="p-4">All sides: 16px</div>
<div className="px-4 py-2">Horizontal: 16px, Vertical: 8px</div>
<div className="pt-8 pb-4">Top: 32px, Bottom: 16px</div>

// Margin
<div className="m-4">All sides: 16px</div>
<div className="mx-auto">Centered horizontally</div>
<div className="mt-8 mb-4">Top: 32px, Bottom: 16px</div>

// Common spacing values
// 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 6 = 24px, 8 = 32px, 12 = 48px, 16 = 64px

Colors

Tailwind has a built-in color palette with shades from 50 (lightest) to 950 (darkest):

// Text colors
<p className="text-gray-600">Muted text</p>
<p className="text-blue-500">Blue text</p>
<p className="text-red-600">Error text</p>
<p className="text-green-600">Success text</p>

// Background colors
<div className="bg-white">White background</div>
<div className="bg-gray-100">Light gray background</div>
<div className="bg-blue-500">Blue background</div>
<div className="bg-blue-500/50">Blue with 50% opacity</div>

// Border colors
<div className="border border-gray-200">Light border</div>
<div className="border-2 border-blue-500">Thick blue border</div>

Common color patterns in AI-generated code:

• Text: text-gray-900 (headings), text-gray-600 (body), text-gray-400 (muted)
• Backgrounds: bg-white, bg-gray-50, bg-gray-100
• Accents: bg-blue-500, text-blue-600, border-blue-500
• States: text-green-600 (success), text-red-600 (error), text-yellow-600 (warning)

Typography

// Font size
<h1 className="text-4xl font-bold">Large Heading</h1>
<h2 className="text-2xl font-semibold">Medium Heading</h2>
<p className="text-base">Normal paragraph</p>
<p className="text-sm text-gray-500">Small muted text</p>
<span className="text-xs">Tiny text</span>

// Font weight
<span className="font-light">Light</span>
<span className="font-normal">Normal</span>
<span className="font-medium">Medium</span>
<span className="font-semibold">Semi-bold</span>
<span className="font-bold">Bold</span>

// Text alignment and decoration
<p className="text-center">Centered</p>
<p className="text-right">Right-aligned</p>
<a className="underline hover:no-underline">Link</a>
<p className="line-through">Strikethrough</p>
<p className="leading-relaxed">Relaxed line height</p>

Responsive Design

Tailwind uses mobile-first breakpoints. Add a prefix to apply styles at specific screen sizes:

// Mobile-first: styles apply from that breakpoint UP
<div className="
  p-4            // All screens: 16px padding
  md:p-8         // Medium screens (768px+): 32px padding
  lg:p-12        // Large screens (1024px+): 48px padding
">

// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* 1 column on mobile, 2 on tablet, 3 on desktop */}
</div>

// Hide/show at breakpoints
<div className="hidden md:block">Only visible on tablet and up</div>
<div className="block md:hidden">Only visible on mobile</div>

// Responsive text
<h1 className="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive Heading
</h1>

What to ask your AI: "Make this component responsive. On mobile it should [stack vertically], on tablet [two columns], on desktop [three columns]."

Dark Mode

Tailwind supports dark mode with the dark: prefix:

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 className="text-black dark:text-white">Hello</h1>
  <p className="text-gray-600 dark:text-gray-300">This adapts to dark mode</p>
  <div className="border border-gray-200 dark:border-gray-700 rounded p-4">
    Card content
  </div>
</div>

To enable dark mode based on system preference, add this to your tailwind.config.ts:

// tailwind.config.ts
export default {
  darkMode: "class", // or "media" for system preference
  // ...
};

Interactive States

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

// Focus
<input className="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none rounded px-3 py-2" />

// Active
<button className="bg-blue-500 active:bg-blue-700">Press me</button>

// Disabled
<button className="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed">
  Disabled
</button>

// Group hover (child reacts to parent hover)
<div className="group cursor-pointer border rounded p-4 hover:shadow-lg">
  <h3 className="group-hover:text-blue-500">Title changes on card hover</h3>
  <p className="text-gray-500">Description stays the same</p>
</div>

shadcn/ui — Pre-Built Components

shadcn/ui is a popular component library built on Tailwind CSS. Instead of installing a package, you copy components directly into your project:

# Install shadcn/ui in your Next.js project
npx shadcn@latest init

# Add specific components
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add input

Then use them in your code:

import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

function MyPage() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Login</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input placeholder="Email" />
        <Input type="password" placeholder="Password" />
        <Button className="w-full">Sign In</Button>
        <Button variant="outline" className="w-full">Sign Up</Button>
      </CardContent>
    </Card>
  );
}

AI tools frequently generate code using shadcn/ui because the components are well-documented and customizable.

What to ask your AI: "Build a [feature] using shadcn/ui components. Use the Button, Card, and Dialog components."

Code Examples: Common UI Patterns

Navigation Bar

function Navbar() {
  return (
    <nav className="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
      <a href="/" className="text-xl font-bold">MyApp</a>
      <div className="hidden md:flex gap-6">
        <a href="/features" className="text-gray-600 hover:text-gray-900">Features</a>
        <a href="/pricing" className="text-gray-600 hover:text-gray-900">Pricing</a>
        <a href="/about" className="text-gray-600 hover:text-gray-900">About</a>
      </div>
      <button className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
        Get Started
      </button>
    </nav>
  );
}

Hero Section

function Hero() {
  return (
    <section className="py-20 px-6 text-center bg-gradient-to-b from-blue-50 to-white">
      <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
        Build Amazing Apps
      </h1>
      <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
        The fastest way to build modern web applications with AI assistance.
      </p>
      <div className="flex gap-4 justify-center">
        <button className="bg-blue-500 text-white px-8 py-3 rounded-lg text-lg hover:bg-blue-600">
          Start Free
        </button>
        <button className="border border-gray-300 px-8 py-3 rounded-lg text-lg hover:bg-gray-50">
          Learn More
        </button>
      </div>
    </section>
  );
}

What's Next?

You can now style any React or Next.js component with Tailwind. The final tutorial is your React & Next.js Cheat Sheet — a quick reference with all the key patterns and AI prompts in one place.

---

🌐 www.genai-mentor.ai