bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
2.3 KiB
2.3 KiB
name, description
| name | description |
|---|---|
| best-practices-utility-patterns | Managing duplication, conflicts, important modifier, and when to use components |
Best Practices: Utility Patterns
Practical patterns when building with Tailwind utilities.
Managing duplication
Use components for repeated UI: Extract into React/Vue/Svelte components or template partials.
function Button({ children, variant = 'primary' }) {
const base = 'px-4 py-2 rounded-lg font-medium'
const variants = {
primary: 'bg-blue-500 hover:bg-blue-600 text-white',
secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
}
return <button className={`${base} ${variants[variant]}`}>{children}</button>
}
Use loops when markup is repeated from data—the class list is written once.
Multi-cursor editing for localized duplication in a single file.
Managing conflicts
When two utilities target the same property, the one later in the stylesheet wins. Avoid adding conflicting classes:
<!-- Bad -->
<div class="flex grid">Conflict</div>
<!-- Good: conditional class -->
<div class={gridLayout ? 'grid' : 'flex'}>
Important modifier
Add ! suffix to force !important:
<div class="bg-teal-500 bg-red-500!">Red wins</div>
Use sparingly; prefer fixing specificity properly.
Important flag (global)
@import "tailwindcss" important;
Makes all utilities !important. Useful when integrating into existing high-specificity CSS.
Prefix option
@import "tailwindcss" prefix(tw);
Generates tw:text-red-500 etc. Use when project class names conflict with Tailwind.
When to use inline styles
- Values from API/database (e.g. brand colors)
- Dynamic values that change at runtime
- Complex arbitrary values hard to read as class names
- Pattern: set CSS variables via inline style, reference with
bg-(--my-var)
Key Points
- Extract repeated patterns into components
- Never add two conflicting utilities—use conditional classes
!suffix = single utility!importantimportantflag = all utilities!importantprefix(tw)= prefix all utilities- Use inline styles for dynamic values; utilities for static design