What is tailwind-patterns?

This Claude skill optimizes Tailwind CSS development by enforcing inheritance-based styling and custom configuration. It helps developers create cleaner, more maintainable front-end code by minimizing redundant utility classes and reducing DOM complexity through element merging and efficient utility application.

When should I use tailwind-patterns?

tailwind-patterns is useful in the following scenarios: • Refactoring legacy React or Vue components to remove redundant Tailwind classes and simplify the DOM structure. • Establishing a consistent design system by implementing a custom Tailwind configuration with a restricted, semantic color palette. • Building high-performance, responsive UI components that leverage CSS inheritance to reduce total CSS bundle size. • Standardizing front-end coding practices within a team to ensure clean, readable, and DRY (Don't Repeat Yourself) styling logic.

name	tailwind-patterns
description	Efficient Tailwind CSS patterns using inheritance and custom config

Tailwind Patterns

Purpose: Efficient Tailwind CSS (inheritance, minimal wrappers, custom config)

Keywords: tailwind, styling, css, className, responsive, tw, tailwindcss

Quick Reference

Principle	✅ DO	❌ AVOID
Inheritance	Set at highest level	Repeat inherited styles
Elements	Merge classes	Wrapper divs for styling only
Colors	Custom config only	Default Tailwind palette
Utilities	Only when changing	Redundant classes

Custom colors: primary, secondary, tertiary, quaternary, accent, background

Set Styles at Highest Level

// ✅ Set once, inherits
export function App() {
  return (
    <body className="text-secondary bg-background font-sans">
      <Header />
      <Main />
    </body>
  )
}

// ❌ Repeating inherited
export function Header() {
  return (
    <header className="text-secondary font-sans"> {/* Already inherited */}
      <h1 className="text-secondary">Title</h1>
    </header>
  )
}

Only Override When Changing

// ✅ Only add utilities that CHANGE
export function Card() {
  return (
    <div className="bg-primary text-background p-4">
      <h2 className="text-xl font-bold">Title</h2>
      <p>Body inherits text-background</p>
    </div>
  )
}

// ❌ Re-applying inherited
<div className="bg-primary text-background p-4">
  <h2 className="text-background text-xl">Title</h2> {/* Redundant */}
</div>

Merge Classes, Not Wrappers

// ✅ Single element
export function Button({ children }: { children: ReactNode }) {
  return (
    <button className="bg-primary text-background px-4 py-2 rounded">
      {children}
    </button>
  )
}

// ❌ Wrapper div for styling
export function Button({ children }: { children: ReactNode }) {
  return (
    <div className="bg-primary rounded">
      <button className="text-background px-4 py-2">{children}</button>
    </div>
  )
}

Before Adding Class

Already inherited? Check parents
Can apply to parent? Reduce duplication
Wrapper necessary? Or merge into one element?
Color exists in config? Only use configured colors

Custom Colors (Default Palette Removed)

// ✅ Using custom config
<div className="bg-primary text-background">
  <p className="text-secondary">Text</p>
  <span className="text-accent">Accent</span>
</div>

// ❌ Default Tailwind (not in config)
<div className="bg-blue-500 text-white">
  <p className="text-gray-600">Text</p>
</div>

Why This Matters

Smaller bundles: Fewer utilities = smaller CSS
Cleaner DOM: Fewer wrappers = better performance
Single source: Styles set once, inherited
Easier refactoring: Change once at root
Consistent design: Limited palette enforces system

Responsive

<div className="p-4 md:p-6 lg:p-8">
  <h1 className="text-2xl md:text-3xl lg:text-4xl">Title</h1>
</div>

Conditional Styling

export function Button({ variant }: { variant: "primary" | "secondary" }) {
  return (
    <button
      className={
        variant === "primary"
          ? "bg-primary text-background"
          : "bg-secondary text-primary"
      }
    >
      Click me
    </button>
  )
}

tailwind-patterns

When & Why to Use This Skill

Use Cases