Agent skill

tailwind-config

Update Tailwind CSS configuration, custom themes, and design tokens across packages. Use when adding new colors, spacing scales, or customizing the design system.

View SKILL.md on GitHub Repository
Stars 20
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/sgcarstrends/sgcarstrends/tree/main/.claude/skills/tailwind-config

SKILL.md

Tailwind CSS Configuration Skill

Configuration Structure

packages/ui/
├── tailwind.config.ts       # Base config with shadcn/ui theming
└── src/styles/globals.css   # CSS variables

apps/web/
├── tailwind.config.ts       # Extends UI package config
└── src/app/globals.css      # App-specific styles

CSS Variables

Defined in packages/ui/src/styles/globals.css:

css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --muted: 210 40% 96.1%;
    --accent: 210 40% 96.1%;
    --destructive: 0 84.2% 60.2%;
    --border: 214.3 31.8% 91.4%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    /* ... dark mode values */
  }
}

Adding Custom Colors

typescript
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: "#0070F3",
          secondary: "#7928CA",
        },
      },
    },
  },
};

Adding Animations

typescript
theme: {
  extend: {
    keyframes: {
      shimmer: {
        "0%": { backgroundPosition: "-200% 0" },
        "100%": { backgroundPosition: "200% 0" },
      },
    },
    animation: {
      shimmer: "shimmer 2s linear infinite",
    },
  },
}

Custom Utilities

css
/* globals.css */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

Plugins

typescript
plugins: [
  require("@tailwindcss/typography"),  // prose classes
  require("@tailwindcss/forms"),        // form resets
  require("tailwindcss-animate"),       // animations
]

Size Utility Convention

Use size-* instead of h-* w-* for equal dimensions:

tsx
// ✅ Good
<div className="size-4">Icon</div>
<div className="size-8">Avatar</div>

// ❌ Avoid
<div className="h-4 w-4">Icon</div>

Dark Mode

Tailwind v4 uses a CSS custom variant instead of config-based darkMode:

css
/* globals.css */
@custom-variant dark (&:is(.dark *));

This is already configured in both apps/web/src/app/globals.css and packages/ui/src/styles/globals.css. Dark CSS variables are fully defined in .dark blocks in both files.

Theme switching uses next-themes with attribute="class" to toggle .dark on <html>:

tsx
import { useTheme } from "next-themes";
const { resolvedTheme, setTheme } = useTheme();

Status: Dark mode activation is deferred until after HeroUI v3 migration (#714, blocked by #587). The CSS infrastructure is ready.

Debugging

bash
# Check resolved config
npx tailwindcss config

# Watch for generated classes
TAILWIND_MODE=watch npx tailwindcss -i ./src/styles/globals.css -o ./dist/output.css --watch

Common issues:

  • Classes not applying → Check content paths
  • Dark mode not working → Verify darkMode: ["class"] and ThemeProvider
  • Classes purged → Add to safelist or use complete class names

Best Practices

  1. Mobile-first - Default styles for mobile, add breakpoints up
  2. CSS Variables - Use for theming (enables dark mode)
  3. Content paths - Include all component paths
  4. Semantic names - Use brand, accent not blue-500
  5. Size utility - Use size-* for equal dimensions

References

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

sgcarstrends/sgcarstrends

component-tester

Run Vitest tests for a specific component with coverage. Use when making changes to React components to ensure tests pass and coverage is maintained.

20 1
Explore
sgcarstrends/sgcarstrends

cache-components

Ensure 'use cache' is used strategically to minimize CPU usage and ISR writes. Use when creating/modifying queries to verify caching decisions align with data update patterns and cost optimization.

20 1
Explore
sgcarstrends/sgcarstrends

ui-design-system

Enforce modern dashboard UI patterns with pill-shaped design, professional colour scheme, and typography standards. Use when building or reviewing UI components for the web application.

20 1
Explore
sgcarstrends/sgcarstrends

typography-spacing-enforcer

Enforce Typography system and modern spacing conventions. Use when implementing new UI components to ensure design consistency with project standards.

20 1
Explore
sgcarstrends/sgcarstrends

conventional-commits

Format commit messages following project conventions with commitlint validation. Use when committing changes, writing PR descriptions, or preparing releases.

20 1
Explore
sgcarstrends/sgcarstrends

dependency-upgrade

Upgrade dependencies safely using pnpm catalog, checking for breaking changes, and testing upgrades. Use when updating packages, applying security patches, upgrading major versions, resolving dependency conflicts, or modernizing tech stack.

20 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results