About tailwindcss-responsive
A reference skill for responsive design in Tailwind CSS v4, intended for developers building layouts across screen sizes. It explains the default and custom breakpoints, container queries, and mobile-first styling.
Key features
- 01Default responsive breakpoints
- 02Custom breakpoints with @theme
- 03Container queries and variants
- 04Mobile-first styling pattern
Use cases
- 01Layering styles for larger screen sizes
- 02Defining project-specific breakpoints
- 03Applying styles based on container dimensions
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/tailwindcss-responsivein Claude Code to confirm it loaded.
Details
From the project README
Documents responsive design utilities in Tailwind CSS v4: the default breakpoint scale (`sm`/`md`/`lg`/`xl`/`2xl`), defining custom breakpoints via `@theme`, container queries (`@container`, `@md`, `@lg` container-relative variants), and the mobile-first authoring pattern (base styles first, larger-breakpoint overrides layered on top).
Responsive Design
Default Breakpoints
| 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) |
Custom breakpoint
@theme {
--breakpoint-3xl: 120rem;
}
/* Usage: 3xl:grid-cols-6 */
Container Queries v4
<div class="@container">
<div class="@md:grid-cols-2 @lg:grid-cols-3">
<!-- Responsive to container -->
</div>
</div>
Size containers (since v4.3)
@container creates an inline-size container; @container-size creates a size container so block-axis units (cqb, cqh) resolve. Name it with @container-size/{name}.
<div class="@container-size">
<div class="h-[50cqb]">
<!-- Half the container's block size -->
</div>
</div>
Mobile-first
<div class="text-sm md:text-base lg:text-lg">
<!-- Small screens first -->
</div>
Comments
Markdown supported