tailwindcss-sizing
Sizing utilities Tailwind CSS v4.1. Width (w-*, w-screen, w-full, w-auto), Height (h-*, h-screen, h-full, h-dvh NEW), Min/Max (min-w-*, max-w-*, min-h-*, max-h-*), Aspect ratio (aspect-video, aspect-square).
What this skill does
# Tailwind CSS Sizing Utilities
Comprehensive guide to sizing utilities in Tailwind CSS v4.1, including width, height, constraints, and aspect ratio controls.
## Width Utilities
### Basic Width Classes
- `w-0` - `w-96`: Fixed widths from 0 to 384px
- `w-full` - 100% width
- `w-screen` - 100% of viewport width
- `w-auto` - Auto width
- `w-min` - min-content
- `w-max` - max-content
- `w-fit` - fit-content
### Responsive Width
Apply different widths at different breakpoints:
```html
<div class="w-full md:w-1/2 lg:w-1/3">
Responsive width
</div>
```
## Height Utilities
### Basic Height Classes
- `h-0` - `h-96`: Fixed heights from 0 to 384px
- `h-full` - 100% height
- `h-screen` - 100% of viewport height (100vh)
- `h-auto` - Auto height
- `h-min` - min-content
- `h-max` - max-content
- `h-fit` - fit-content
- `h-dvh` - Dynamic viewport height (NEW in v4.1)
### Dynamic Viewport Height (h-dvh)
The `h-dvh` utility uses the dynamic viewport height, which accounts for browser UI elements:
```html
<div class="h-dvh">
Full dynamic viewport height
</div>
```
## Min/Max Width
### min-width
- `min-w-0` - min-width: 0
- `min-w-full` - min-width: 100%
- `min-w-min` - min-width: min-content
- `min-w-max` - min-width: max-content
- `min-w-fit` - min-width: fit-content
### max-width
- `max-w-none` - max-width: none
- `max-w-full` - max-width: 100%
- `max-w-screen-sm` - Based on breakpoints
- `max-w-screen-md`
- `max-w-screen-lg`
- `max-w-screen-xl`
- `max-w-screen-2xl`
## Min/Max Height
### min-height
- `min-h-0` - min-height: 0
- `min-h-full` - min-height: 100%
- `min-h-screen` - min-height: 100vh
- `min-h-min` - min-height: min-content
- `min-h-max` - min-height: max-content
- `min-h-fit` - min-height: fit-content
### max-height
- `max-h-none` - max-height: none
- `max-h-full` - max-height: 100%
- `max-h-screen` - max-height: 100vh
- `max-h-min` - max-height: min-content
- `max-h-max` - max-height: max-content
- `max-h-fit` - max-height: fit-content
## Aspect Ratio
### Common Aspect Ratios
- `aspect-auto` - auto
- `aspect-square` - 1 / 1
- `aspect-video` - 16 / 9
### Custom Aspect Ratios
```html
<!-- 3:2 ratio -->
<div class="aspect-[3/2]">
Image container
</div>
```
## Common Patterns
### Full Screen Container
```html
<div class="w-screen h-dvh bg-white">
Full screen content
</div>
```
### Constrained Container
```html
<div class="max-w-4xl mx-auto w-full px-4">
Content with max width and padding
</div>
```
### Image Wrapper
```html
<div class="w-full h-auto">
<img src="image.jpg" alt="description" class="w-full h-auto object-cover" />
</div>
```
### Video Container
```html
<div class="w-full aspect-video bg-black">
<video src="video.mp4" class="w-full h-full"></video>
</div>
```
### Sidebar Layout
```html
<div class="flex min-h-screen">
<aside class="w-64 h-screen overflow-auto">
Sidebar
</aside>
<main class="flex-1">
Content
</main>
</div>
```
## References
- [Width Documentation](https://tailwindcss.com/docs/width)
- [Height Documentation](https://tailwindcss.com/docs/height)
- [Min-Width Documentation](https://tailwindcss.com/docs/min-width)
- [Max-Width Documentation](https://tailwindcss.com/docs/max-width)
- [Min-Height Documentation](https://tailwindcss.com/docs/min-height)
- [Max-Height Documentation](https://tailwindcss.com/docs/max-height)
- [Aspect Ratio Documentation](https://tailwindcss.com/docs/aspect-ratio)
Related in Image & Video
watch
IncludedWatch a video (URL or local path). Downloads with yt-dlp, extracts auto-scaled frames with ffmpeg, pulls the transcript from captions (or Whisper API fallback), and hands the result to Claude so it can answer questions about what's in the video.
physical-ai-defect-image-generation
IncludedUse when the user wants to orchestrate defect image generation, run associated setup, or handle outputs on OSMO. The Day 0 path handles cold-start with USD-to-ROI, image-edit augmentation, and AnomalyGen to create initial PCBA datasets. The Day 1 path performs inference and labeling on real images. This skill helps with first-time asset setup, creation of finetuning checkpoints, and configuring deployment. Trigger keywords: defect image generation, dig workflow, dig pipeline, defect image detection workflow, aoi pipeline, aoi anomalygen, usd2roi anomalygen, day 0 pcba, day 1 pcba, day 1 real-photo alignment, day 1 manual roi, metal surface anomaly, glass defect, anomalygen finetune, setup_pcb, setup_metal, setup_glass, setup_pretrained, dig setup, dig datasets, dig pretrained checkpoint, dig image-edit endpoint.
accelint-react-best-practices
IncludedReact performance optimization and best practices. ALWAYS use this skill when working with any React code - writing components, hooks, JSX; refactoring; optimizing re-renders, memoization, state management; reviewing for performance; fixing hydration mismatches; debugging infinite re-renders, stale closures, input focus loss, animations restarting; preventing remounting; implementing transitions, lazy initialization, effect dependencies. Even simple React tasks benefit from these patterns. Covers React 19+ (useEffectEvent, Activity, ref props). Triggers - useEffect, useState, useMemo, useCallback, memo, inline components, nested components, components inside components, re-render, performance, hydration, SSR, Next.js, useDeferredValue, combined hooks.
elevenlabs-agents
IncludedBuild conversational AI voice agents with ElevenLabs Platform using React, JavaScript, React Native, or Swift SDKs. Configure agents, tools (client/server/MCP), RAG knowledge bases, multi-voice, and Scribe real-time STT. Use when: building voice chat interfaces, implementing AI phone agents with Twilio, configuring agent workflows or tools, adding RAG knowledge bases, testing with CLI "agents as code", or troubleshooting deprecated @11labs packages, Android audio cutoff, CSP violations, dynamic variables, or WebRTC config. Keywords: ElevenLabs Agents, ElevenLabs voice agents, AI voice agents, conversational AI, @elevenlabs/react, @elevenlabs/client, @elevenlabs/react-native, @elevenlabs/elevenlabs-js, @elevenlabs/agents-cli, elevenlabs SDK, voice AI, TTS, text-to-speech, ASR, speech recognition, turn-taking model, WebRTC voice, WebSocket voice, ElevenLabs conversation, agent system prompt, agent tools, agent knowledge base, RAG voice agents, multi-voice agents, pronunciation dictionary, voice speed control, elevenlabs scribe, @11labs deprecated, Android audio cutoff, CSP violation elevenlabs, dynamic variables elevenlabs, case-sensitive tool names, webhook authentication
humanizer
IncludedHumanize AI-generated text by detecting and removing patterns typical of LLM output. Rewrites text to sound natural, specific, and human. Uses 28 pattern detectors, 560+ AI vocabulary terms across 3 tiers, and statistical analysis (burstiness, type-token ratio, readability) for comprehensive detection. Use when asked to humanize text, de-AI writing, make content sound more natural/human, review writing for AI patterns, score text for AI detection, or improve AI-generated drafts. Covers content, language, style, communication, and filler categories.
generating-mermaid-diagrams
IncludedSalesforce architecture diagrams using Mermaid with ASCII fallback. Use this skill when generating text-based diagrams for Salesforce architecture, OAuth flows, ERDs, integration sequences, or Agentforce structure. TRIGGER when: user says "diagram", "visualize", "ERD", or asks for sequence diagrams, flowcharts, class diagrams, or architecture visualizations in Mermaid. DO NOT TRIGGER when: user wants PNG/SVG image output (use generating-visual-diagrams), or asks about non-Salesforce systems.