Can I define custom aspect ratios with this skill?

Yes, it provides examples for both standard ratios like aspect-video and custom JIT aspect ratios using bracket notation.

Does it support the dynamic viewport height (h-dvh)?

Yes, it includes full documentation and implementation patterns for h-dvh to ensure layouts work correctly with mobile browser chrome.

What Tailwind version does this skill cover?

This skill is specifically optimized for Tailwind CSS v4.1, including the latest utility additions and syntax changes.

Is it useful for responsive design?

Absolutely. It covers responsive width and height classes, showing how to apply different sizing constraints at various breakpoints.

Tailwind CSS Sizing Utilities

Name: Tailwind CSS Sizing Utilities
Author: fusengine

byfusengine

0•

디자인 도구

Simplifies frontend layout construction by providing comprehensive Tailwind CSS v4.1 sizing utilities for widths, heights, constraints, and aspect ratios.

This skill equips Claude with the technical knowledge to implement precise, responsive layouts using the latest Tailwind CSS v4.1 specifications. It covers a broad range of sizing controls, from standard pixel-based increments to advanced dynamic viewport units like h-dvh and modern aspect ratio configurations. By leveraging this skill, developers can ensure that AI-generated styles adhere to best practices for container constraints, sidebar layouts, and media-rich components, resulting in production-grade CSS that works across all device types.

주요 기능

01Comprehensive width and height utilities (v4.1)

02Standardized responsive layout patterns for containers and sidebars

03Support for Dynamic Viewport Height (h-dvh)

04Advanced Min/Max constraint implementation

050 GitHub stars

06Modern Aspect Ratio controls including custom JIT ratios

사용 사례

01Building responsive full-screen applications that account for mobile browser UI elements

02Implementing robust layout structures like sidebars and constrained content wrappers

03Creating media-heavy interfaces with consistent aspect-ratio-locked containers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents tailwindcss-sizing

For use in Claude.ai and ChatGPT

Download Skill