Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From fuse-tailwindcss
Provides Tailwind CSS reference for responsive design: default/custom breakpoints, container queries v4, mobile-first utilities. Use for responsive layouts.
npx claudepluginhub fusengine/agents --plugin fuse-tailwindcssHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-tailwindcss:tailwindcss-responsiveThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
| Variant | Size | CSS |
Guides responsive layouts and mobile-first designs with Tailwind CSS using breakpoints, container queries, grids, typography, spacing, and visibility utilities.
Implements responsive layouts with container queries, fluid typography, CSS Grid, Flexbox, and mobile-first breakpoints for adaptive web interfaces across devices.
Build responsive layouts using Tailwind's mobile-first breakpoints, container queries, and fluid typography. Covers adapting for screen sizes and container-based components.
Share bugs, ideas, or general feedback.
| Variant | Size | CSS |
|---|---|---|
sm: | 40rem (640px) | @media (width >= 40rem) |
md: | 48rem (768px) | @media (width >= 48rem) |
lg: | 64rem (1024px) | @media (width >= 64rem) |
xl: | 80rem (1280px) | @media (width >= 80rem) |
2xl: | 96rem (1536px) | @media (width >= 96rem) |
@theme {
--breakpoint-3xl: 120rem;
}
/* Usage: 3xl:grid-cols-6 */
<div class="@container">
<div class="@md:grid-cols-2 @lg:grid-cols-3">
<!-- Responsive to container -->
</div>
</div>
<div class="text-sm md:text-base lg:text-lg">
<!-- Small screens first -->
</div>