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.
94
95%
Does it follow best practices?
Impact
89%
1.56xAverage score across 3 eval scenarios
Passed
No known issues
Evaluation results
76%
34%Product Listing Page
Responsive card grid layout
Centered container
0%
100%
Responsive grid classes
0%
100%
Grid gap
100%
100%
Card background and rounding
0%
100%
Card shadow
100%
100%
Card padding
0%
0%
Card title classes
100%
100%
Card title margin
0%
0%
Card body text color
0%
0%
Responsive width breakpoints
100%
100%
Spacing scale usage
0%
100%
Tailwind CDN loaded
100%
100%
100%
18%Contact Form with Dark Mode Support
Dark mode form with config
darkMode config value
100%
100%
darkMode config syntax
100%
100%
Dark bg on container
100%
100%
Dark text on container
50%
100%
Input border class
100%
100%
Input rounding
100%
100%
Input focus ring
100%
100%
Input focus border removal
0%
100%
Input full width
100%
100%
Button base color
100%
100%
Button hover state
100%
100%
Button transition
100%
100%
Vertical stack layout
0%
100%
93%
45%Site Navigation Bar
Navbar with interactive states and arbitrary values
Calc arbitrary height
0%
100%
Bracket notation used
0%
100%
Flex row navbar
60%
100%
Navbar gap
0%
0%
group-hover sub-menu
100%
100%
group class on parent
100%
100%
hover: on nav links
100%
100%
Button bg-blue-600
0%
100%
Button text-white
100%
100%
Button hover:bg-blue-700
0%
100%
Button rounded-lg
0%
100%
md: breakpoint used
100%
100%
- Repository
- NeverSight/skills_feed
- Commit
f772de4
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.