Tailwind CSS v4 Skill

Quick Reference

Tailwind v4 CSS-Based Config

/* styles.css */
@import "tailwindcss";

@theme {
  --color-primary: oklch(0.5 0.2 240);
  --radius-lg: 0.5rem;
}

Layout

// Flexbox
<div className="flex items-center justify-between gap-4">

// Grid
<div className="grid grid-cols-3 gap-4">

// Container
<div className="container mx-auto px-4">

Spacing

// Padding
<div className="p-4 px-6 py-2">

// Margin
<div className="m-4 mx-auto my-2">

// Gap
<div className="gap-4 gap-x-2 gap-y-4">

Typography

<h1 className="text-4xl font-bold tracking-tight">
<p className="text-muted-foreground text-sm">
<span className="font-medium">

Colors (Semantic)

// Background
<div className="bg-background bg-primary bg-muted">

// Text
<span className="text-foreground text-primary text-muted-foreground">

// Border
<div className="border border-border border-primary">

Sizing

// Width/Height
<div className="w-full h-screen w-64 h-12">

// Max/Min
<div className="max-w-md min-h-screen">

Borders & Shadows

<div className="rounded-lg border border-border shadow-sm">
<div className="rounded-full">

Interactive States

<button className="hover:bg-primary/90 focus:ring-2 focus:ring-primary disabled:opacity-50">
<a className="hover:underline">

Responsive Design

// Mobile-first breakpoints
<div className="w-full md:w-1/2 lg:w-1/3">

// Hide/show
<div className="hidden md:block">
<div className="block md:hidden">

Animation

// Built-in
<div className="animate-spin animate-pulse animate-bounce">

// Transitions
<div className="transition-colors duration-200 ease-in-out">

Shadcn/ui Components

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

// Button variants
<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>

// Button sizes
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

// Card
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>
    Content here
  </CardContent>
</Card>

Dark Mode

// Automatic with system preference
<div className="bg-background text-foreground">

// Force dark
<div className="dark">
  <div className="bg-background"> {/* Uses dark theme colors */}

Custom Classes with cn()

import { cn } from "@/lib/utils"

interface Props {
  className?: string
}

function Component({ className }: Props) {
  return (
    <div className={cn(
      "flex items-center p-4 rounded-lg",
      "bg-background border border-border",
      className
    )}>
      Content
    </div>
  )
}

Form Styling

<form className="space-y-4">
  <div className="space-y-2">
    <label className="text-sm font-medium">Email</label>
    <Input type="email" placeholder="email@example.com" />
  </div>
  <Button type="submit" className="w-full">
    Submit
  </Button>
</form>

Common Patterns

Card with Actions

<Card>
  <CardHeader className="flex flex-row items-center justify-between">
    <CardTitle>Title</CardTitle>
    <Button variant="ghost" size="sm">Action</Button>
  </CardHeader>
  <CardContent className="space-y-4">
    {/* Content */}
  </CardContent>
</Card>

Responsive Grid

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {items.map(item => (
    <Card key={item.id}>...</Card>
  ))}
</div>

Loading State

<Button disabled={isLoading}>
  {isLoading ? (
    <>
      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
      Loading...
    </>
  ) : (
    'Submit'
  )}
</Button>

Official References

Shared Styleguide Baseline

Use shared styleguides for generic language/framework rules to reduce duplication in this skill.
General Principles
Tailwind and Shadcn
Keep this skill focused on tool-specific workflows, edge cases, and integration details.