Tailwind Css
Enforce consistent Tailwind utility patterns so solo-built UIs stay mobile-safe and maintainable without fighting wrap, viewport, and spacing bugs.
Overview
Tailwind CSS is an agent skill most often used in Build (also Ship review) that applies opinionated Tailwind utility-class rules for layout, spacing, viewport height, and dark-mode patterns.
Install
npx skills add https://github.com/paulrberg/agent-skills --skill tailwind-cssWhat is this skill?
- Prefers gap over space-x/y so flex and grid wraps do not break spacing
- Requires min-h-dvh instead of min-h-screen for mobile Safari viewport chrome
- Documents size-* vs w/h, top/left margins, parent padding, and class-merging patterns
- Covers typography, color, borders, gradients, arbitrary values, z-index, and image sizing
- Explicit when-to-read triggers for fixing or writing Tailwind class usage
Adoption & trust: 1.6k installs on skills.sh; 62 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You keep shipping Tailwind UIs that break on mobile wrap, wrong viewport height, or inconsistent spacing because the agent picks default utilities that fight each other.
Who is it for?
Solo builders who want their coding agent to mirror strict Tailwind conventions while implementing or refactoring frontend screens.
Skip if: Teams standardizing on component libraries only (no raw utilities) or projects that do not use Tailwind CSS at all.
When should I use this skill?
When writing or fixing Tailwind utility class usage, layout, spacing, typography, color, border, gradient, arbitrary value, class-merging, image-sizing, z-index, or dark-mode patterns.
What do I get? / Deliverables
Generated or fixed components follow a single Tailwind style guide so layouts stay predictable across breakpoints and dark mode without manual class-by-class rework.
- Updated className strings following project Tailwind preferences
- Consistent layout and spacing fixes across components
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill governs day-to-day UI implementation with utility classes. Every rule targets layout, spacing, typography, and dark-mode class usage in frontend markup.
Where it fits
Scaffold a dashboard shell with min-h-dvh and gap-based grids so mobile wrap does not collapse horizontal spacing.
Audit a PR for space-x on wrapping flex rows and replace with gap before launch.
Polish a landing prototype’s typography and color utilities to match project Tailwind habits before full build.
How it compares
Use as a class-level style guardrail instead of ad-hoc “make it look good” chat prompts without project-specific Tailwind rules.
Common Questions / FAQ
Who is tailwind-css for?
Indie and solo frontend builders using Tailwind who want agents to follow the same utility preferences every time they write or fix className strings.
When should I use tailwind-css?
During Build frontend work when implementing layouts and components, and during Ship review when tightening class usage; also whenever you hit wrapping gaps, dvh vs screen, or dark-mode class merges.
Is tailwind-css safe to install?
It is documentation-style procedural knowledge with no shell or network requirements by default; review the Security Audits panel on this Prism page before enabling in untrusted repos.
SKILL.md
READMESKILL.md - Tailwind Css
# Coding Preferences > When to read: when writing or fixing Tailwind utility class usage, layout, spacing, typography, color, border, gradient, arbitrary value, class-merging, image-sizing, z-index, or dark-mode patterns. ## Layout and Spacing **Use `gap` for flex/grid spacing, not `space-x`/`space-y`:** The `gap` utilities handle wrapping correctly, while `space-*` utilities break when flex/grid items wrap to multiple lines. ```typescript // ✅ Good: gap handles wrapping <div className="flex gap-4"> // ❌ Bad: breaks when items wrap <div className="flex space-x-4"> ``` **Prefer `size-*` over separate `w-*`/`h-*` for equal dimensions:** ```typescript // ✅ Good: concise <div className="size-16"> // ❌ Bad: redundant <div className="w-16 h-16"> ``` **Always use `min-h-dvh` instead of `min-h-screen`:** Dynamic viewport height (`dvh`) accounts for mobile browser chrome, while `vh` units ignore it and cause layout issues on mobile Safari. ```typescript // ✅ Good: works on mobile Safari <main className="min-h-dvh"> // ❌ Bad: buggy on mobile Safari <main className="min-h-screen"> ``` **Prefer top/left margins over bottom/right:** Consistent directionality improves layout predictability. ```typescript // ✅ Good: top margin <div className="mt-4"> // ❌ Avoid: bottom margin (unless needed) <div className="mb-4"> ``` **Use padding on parent containers instead of bottom margins on last child:** Padding provides consistent spacing without needing `:last-child` selectors. ```typescript // ✅ Good: padding on parent <section className="pb-8"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </section> // ❌ Avoid: margin on children <section> <div className="mb-4">Item 1</div> <div className="mb-4">Item 2</div> <div>Item 3</div> </section> ``` **For max-widths, prefer container scale over pixel values:** ```typescript // ✅ Good: semantic container size <div className="max-w-2xl"> // ❌ Avoid: arbitrary pixel value <div className="max-w-[672px]"> ``` ## Typography **Avoid `leading-*` classes; use line height modifiers:** Tailwind v4 supports inline line height modifiers with the `text-{size}/{leading}` syntax. ```typescript // ✅ Good: combined size and line height <p className="text-base/7"> // ❌ Bad: separate utilities <p className="text-base leading-7"> ``` **Font Size Reference:** | Class | Size | | ----------- | ---- | | `text-xs` | 12px | | `text-sm` | 14px | | `text-base` | 16px | | `text-lg` | 18px | | `text-xl` | 20px | ## Colors and Opacity **Use opacity modifier syntax, not separate opacity utilities:** All `*-opacity-*` utilities were removed in Tailwind v4. Use the modifier syntax instead. ```typescript // ✅ Good: opacity modifier <div className="bg-red-500/60"> // ❌ Bad: removed in v4 <div className="bg-red-500 bg-opacity-60"> ``` **Prefer design tokens over arbitrary hex values:** Check the project's `@theme` configuration before using arbitrary color values. ```typescript // ✅ Good: theme token <div className="bg-brand"> // ❌ Avoid: arbitrary hex (check theme first) <div className="bg-[#4f46e5]"> ``` ## Border Radius Tailwind v4 renamed border radius utilities: | v3 | v4 (equivalent) | Size | | ------------ | --------------- | ---- | | `rounded-sm` | `rounded-xs` | 2px | | `rounded` | `rounded-sm` | 4px | | `rounded-md` | `rounded` | 6px | | `rounded-lg` | `rounded-md` | 8px | Use the v4 names when writing new code. ## Gradients Tailwind v4 renamed gradient utilities and added new gradient types. **Use `bg-linear-*`, not `bg-gradient-*`:** ```typescript // ✅ Good: v4 syntax <div className="bg-linear-to-r from-blue-500 to-purple-500"> // ❌ Bad: removed in v4 <div className="bg-gradient-to-r from-blue-500 to-purple-500"> ``` **New gradient types:** - `bg-radial` - Radial gradients - `bg-conic` - Conic gradients **Example:** ```typescript <div className="bg-radial from-blue-500 to-purple-500"> <div className="bg-conic from-