Tailwindcss Sizing
This skill generates Tailwind CSS size classes based on your input, streamlining responsive design and ensuring consistent styling across projects.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add tailwindcss-sizing npx -- -y @trustedskills/tailwindcss-sizing
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"tailwindcss-sizing": {
"command": "npx",
"args": [
"-y",
"@trustedskills/tailwindcss-sizing"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill, tailwindcss-sizing, provides automated sizing and responsive design capabilities using Tailwind CSS. It allows you to generate dynamic CSS classes based on specified sizes and breakpoints. The agent can handle various units (px, rem, %, etc.) and automatically adjust values for different screen sizes. This simplifies the process of creating consistent and adaptable user interfaces.
When to use it
- Responsive Web Design: Quickly create responsive layouts that adapt to different devices.
- Prototyping: Rapidly prototype UI elements with varying sizes and spacing.
- Consistent Sizing: Ensure uniform sizing across multiple components in a design system.
- Dynamic Content Display: Adjust the size of content based on screen resolution or user preferences.
Key capabilities
- Automatic CSS class generation for sizing.
- Support for various units (px, rem, %, etc.).
- Responsive sizing across breakpoints.
- Generation of dynamic CSS classes.
Example prompts
- "Generate Tailwind CSS classes for a button with sizes small, medium, and large."
- "Create responsive padding for a container using Tailwind CSS, adjusting from 1rem to 2rem at larger screens."
- “Give me the tailwind css class for a font size of 16px on mobile and 20px on desktop.”
Tips & gotchas
The skill requires familiarity with Tailwind CSS concepts like breakpoints and utility classes. Be specific in your prompts regarding units and desired screen sizes to ensure accurate results.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.