How do I hide elements on specific screen sizes?

The skill demonstrates using display utilities like 'hidden' combined with breakpoint prefixes like 'md:block' to toggle visibility across different devices.

How does this skill handle mobile-first design?

It prioritizes unprefixed utility classes for the smallest screens and applies breakpoint prefixes like md: or lg: to add complexity as the screen size increases.

Does it support modern CSS features like container queries?

Absolutely, it provides patterns for using the @tailwindcss/container-queries plugin to make components responsive to their parent container rather than the viewport.

Can I use custom breakpoints with this skill?

Yes, it includes documentation and implementation patterns for defining and using project-specific breakpoints within the tailwind.config.js file.

Does this skill help with print layouts?

Yes, it includes specific utility patterns for styling content for printed documents using the print: prefix, allowing you to hide navigation or adjust text size for paper.

Tailwind Responsive Design

Name: Tailwind Responsive Design
Author: TheBushidoCollective

byTheBushidoCollective

•

デザインツール

Implements mobile-first layouts and adaptive UI components using Tailwind CSS responsive breakpoints and container queries.

This Claude Code skill provides a comprehensive framework for building production-ready, responsive web interfaces using Tailwind CSS. It enables Claude to apply mobile-first design principles, manage breakpoint-specific utilities for typography and spacing, and implement advanced patterns like container queries and orientation-based styling. By following these best practices, the skill ensures that generated layouts are fluid, accessible, and optimized for every screen size, from small mobile devices to ultra-wide desktops, while avoiding common anti-patterns like excessive breakpoint usage.

主な機能

01Adaptive typography and fluid spacing systems

02Responsive grid and flexbox layout orchestration

03Mobile-first breakpoint implementation and scaling

04Component-level responsiveness using container queries

05Breakpoint-specific visibility and print styling controls

0695 GitHub stars

ユースケース

01Implementing navigation systems with sticky headers and mobile-specific slide-out menus

02Building complex hero sections that adapt from vertical mobile stacks to horizontal desktop layouts

03Creating responsive data grids and card galleries that dynamically adjust column counts based on viewport width

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han tailwind-responsive-design

For use in Claude.ai and ChatGPT

Download Skill