tailwind-css
Best practices for utility-first CSS with Tailwind, responsive design, and component patterns
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill tailwind-css --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Tailwind CSS Build beautiful, responsive interfaces efficiently with utility-first CSS. ## Core Principles ### 1. Utility-First, Component-Last Start with utilities, extract to components only when repetition demands it. Premature abstraction creates indirection without benefit. ### 2. Design in the Browser Tailwind lets you iterate visually without context-switching to CSS files. Experiment, settle on a design, then clean up. ### 3. Consistency Through Constraints Use the design system (colors, spacing, typography) via Tailwind's config. Custom values are escape hatches, not the default. ### 4. Responsive by Default Design mobile-first. Add responsive prefixes (`md:`, `lg:`) to adjust for larger screens, not the other way around. --- ## Tailwind Mastery Scorecard | Skill | Beginner | Proficient | Expert | |-------|----------|------------|--------| | **Utility usage** | Writes long class strings | Groups with `@apply` or `cn()` | Creates composable patterns | | **Config** | Uses default theme | Extends theme with brand tokens | Creates plugins for custom utilities | | **Responsive** | Copy-paste breakpoints | Mobile-first, strategic overrides | Container queries, dynamic breakpoi
- Core Principles
- 1. Utility-First, Component-Last
- 2. Design in the Browser
- 3. Consistency Through Constraints
- 4. Responsive by Default
- Tailwind Mastery Scorecard
- Actionable Guidance
- Class Organization
- Responsive Design
- Component Extraction Patterns
- Design System Integration
- Layout Patterns
- Dark Mode
- Performance
What does the tailwind-css skill do?
Best practices for utility-first CSS with Tailwind, responsive design, and component patterns
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill tailwind-css --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.