Agent skill · design visual · aiskillstore
tailwind-patterns
Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.
Why this skill is useful
Codifies utility class patterns and responsive design standards for Tailwind CSS, which the AI could infer but now doesn't have to guess.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Tailwind Patterns Quick reference for Tailwind CSS utility patterns. Responsive Breakpoints Prefix Min Width -------- ----------- sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px Common Layout Patterns Card Button Form Input Dark Mode State Modifiers Modifier Triggers On ---------- ------------- hover: Mouse hover focus: Element focused active: Being clicked disabled: Disabled state group-hover: Parent hovered Spacing Scale Class Size ------- ------ p-1 4px p-2 8px p-4 16px p-6 24px p-8 32px Arbitrary Values Additional Resources For detailed patterns, load: ./references/component-patterns.md - Navbar, cards, forms, alerts, loading states
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/tailwind-patterns