# Tailwind Patterns > Tailwind 4.0 patterns for styling React components. Applies to class usage, color selection, inheritance optimization, responsive design, or reducing redundant utilities and wrapper divs. Use when this capability is needed. - Skill: `tomevault-io/tailwind-patterns-2` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/tailwind-patterns-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tailwind-patterns-2/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/tailwind-patterns-2 --- # 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 1. Already inherited? → check parents 2. Can apply to parent? → reduce duplication 3. Wrapper necessary? → merge into one element 4. Color in config? → only use custom palette ## Inheritance ```tsx // ✅ set once at root
// ❌ redundant — already inherited

Title

``` ## Override Only When Changing ```tsx // ✅ only utilities that CHANGE from parent

Title

Body inherits text-background

// ❌ re-applying inherited

Title

``` ## Merge Classes, Not Wrappers ```tsx // ✅ single element // ❌ wrapper div for styling
``` ## Custom Colors Only ```tsx // ✅ custom config
Accent
// ❌ default Tailwind palette

Text

``` To verify config: `mgrep .css` → look for `@import "tailwindcss";` ## Responsive ```tsx

Title

``` ## Conditional Styling ```tsx ``` --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/jasondocton) — claim your Tome and manage your conversions.