JasonDocton Tailwind Patterns
Tailwind 4.0 — no config file. Check src/global.css for theme.
Rules
| Pattern | Do | Don't |
|---|---|---|
| Inheritance | set at highest level | repeat inherited styles |
| Elements | merge classes | wrapper divs for styling |
| Colors | custom palette only | default Tailwind colors |
| Utilities | only when changing | redundant classes |
Custom colors: primary, secondary, tertiary, quaternary, accent, background
Before Adding a Class
- Already inherited? → check parents
- Can apply to parent? → reduce duplication
- Wrapper necessary? → merge into one element
- Color in config? → only use custom palette
Inheritance
// ✅ set once at root
<body className="text-secondary bg-background font-sans">
<Header />
<Main />
</body>
// ❌ redundant — already inherited
<header className="text-secondary font-sans">
<h1 className="text-secondary">Title</h1>
</header>
Override Only When Changing
// ✅ only utilities that CHANGE from parent
<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
<h2 className="text-background text-xl">Title</h2>
Merge Classes, Not Wrappers
// ✅ single element
<button className="bg-primary text-background px-4 py-2 rounded">
{children}
</button>
// ❌ wrapper div for styling
<div className="bg-primary rounded">
<button className="text-background px-4 py-2">{children}</button>
</div>
Custom Colors Only
// ✅ custom config
<div className="bg-primary text-background">
<span className="text-accent">Accent</span>
</div>
// ❌ default Tailwind palette
<div className="bg-blue-500 text-white">
<p className="text-gray-600">Text</p>
</div>
To verify config: mgrep .css → look for @import "tailwindcss";
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
<button
className={variant === "primary"
? "bg-primary text-background"
: "bg-secondary text-primary"}
>
Click me
</button>