SKILL.md

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>
  )
}

Score

Total Score

60/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20

✓LICENSE

ライセンスが設定されている

+10

○説明文

100文字以上の説明がある

0/10

○人気

GitHub Stars 100以上

0/15

○最近の活動

3ヶ月以内に更新がある

0/10

○フォーク

10回以上フォークされている

0/5

✓Issue管理

オープンIssueが50未満

+5

✓言語

プログラミング言語が設定されている

+5

○タグ

1つ以上のタグが設定されている

0/5

Reviews

💬

Reviews coming soon