Tailwind CSS Skill

Utility-first CSS framework that enables rapid UI development through composable classes - write zero custom CSS.

When to Use

• Building responsive layouts with mobile-first breakpoints
• Implementing consistent design systems (colors, spacing, typography)
• Rapid UI prototyping without switching between CSS/HTML
• Dark mode implementation with class-based theming

Quick Start

Next.js (includes Tailwind by default):

npx create-next-app@latest
# Select "Yes" for Tailwind CSS

Vite:

npm create vite@latest my-app
npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

Common Use Cases

Startup founder building MVP landing page

Prompt: “Create a landing page with hero section, feature cards, and pricing table”

What happens: ClaudeKit generates mobile-first layout using Tailwind grid/flexbox utilities, consistent spacing scale (p-4, gap-6), responsive breakpoints (md:, lg:), and hover states - zero custom CSS files.

Product designer implementing design system

Prompt: “Build component library with our brand colors: primary #0066FF, secondary #00CC88”

What happens: ClaudeKit configures custom theme in tailwind.config.js, extends color palette with 50-950 shades, applies brand colors across buttons/cards/inputs, implements dark mode variants.

Developer adding responsive dashboard

Prompt: “Create admin dashboard with sidebar, stats cards, and data table”

What happens: ClaudeKit uses Tailwind utilities for layout (grid grid-cols-1 md:grid-cols-3), spacing (space-y-4), shadows (shadow-lg), and breakpoint-specific navigation (hidden md:block).

SaaS team implementing dark mode

Prompt: “Add dark mode toggle with system preference detection”

What happens: ClaudeKit configures darkMode: 'class', adds dark variants (bg-white dark:bg-gray-900), implements toggle component with localStorage persistence, applies theme to all UI elements.

Key Differences

Quick Reference

Layout:

<div class="flex justify-between items-center gap-4">
<div class="grid grid-cols-3 gap-6">
<div class="absolute top-0 right-0">

Spacing (4px increments):

<div class="p-4 m-6 space-y-2">  <!-- padding, margin, gap -->

Typography:

<h1 class="text-2xl font-bold text-gray-900">
<p class="text-sm text-gray-600 leading-relaxed">

Responsive breakpoints:

<div class="w-full md:w-1/2 lg:w-1/3">
<!-- Mobile: full, Tablet: half, Desktop: third -->

Dark mode:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

Custom theme (@theme directive):

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.55 0.22 264);
  --font-display: "Inter", sans-serif;
  --spacing-navbar: 4.5rem;
}

Common patterns:

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

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

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

<!-- Centered container -->
<div class="flex items-center justify-center min-h-screen">

Pro Tips

Organize long class names:

const cardClasses = `
  max-w-sm rounded-lg shadow-lg
  bg-white dark:bg-gray-800
  hover:shadow-xl transition-shadow
`;

<div className={cardClasses}>Content</div>

Extract repeated patterns:

// Create component instead of repeating classes
function Button({ children }) {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      {children}
    </button>
  );
}

Use @apply for complex components:

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
    @apply hover:bg-blue-600 focus:ring-2 focus:ring-blue-500;
  }
}

Not activating? Say: “Use ui-styling skill to build this with Tailwind CSS”

Related Skills

• UI Styling - Combined shadcn/ui + Tailwind
• Frontend Design - Design-focused UI creation
• Frontend Development - Full-stack React development

Key Takeaway

Tailwind eliminates context switching between HTML/CSS by putting all styling in utility classes. ClaudeKit leverages this for rapid prototyping - responsive layouts, dark mode, custom themes - all without writing a single CSS file.