How do I install the Tailwindcss Sizing skill?

Run npx skillmds@latest add fusengine/tailwindcss-sizing-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwindcss Sizing safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwindcss Sizing?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwindcss Sizing free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwindcss Sizing?

fusengine (@fusengine) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwindcss Sizing by fusengine — Agent Skill

Name: Tailwindcss Sizing
Author: fusengine

File contents

Includes common composition patterns: full-screen containers, constrained content width, image/video wrappers, and sidebar layouts.

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:

<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:

<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

<!-- 3:2 ratio -->
<div class="aspect-[3/2]">
  Image container
</div>

Common Patterns

Full Screen Container

<div class="w-screen h-dvh bg-white">
  Full screen content
</div>

Constrained Container

<div class="max-w-4xl mx-auto w-full px-4">
  Content with max width and padding
</div>

Image Wrapper

<div class="w-full h-auto">
  <img src="image.jpg" alt="description" class="w-full h-auto object-cover" />
</div>

Video Container

<div class="w-full aspect-video bg-black">
  <video src="video.mp4" class="w-full h-full"></video>
</div>

Sidebar Layout

<div class="flex min-h-screen">
  <aside class="w-64 h-screen overflow-auto">
    Sidebar
  </aside>
  <main class="flex-1">
    Content
  </main>
</div>

References

---name: tailwindcss-sizing-2description: Use when setting element width/height, constraining min/max dimensions, using dynamic viewport height (h-dvh), or fixing an aspect ratio.---<objective>Complete reference for Tailwind CSS v4.1 sizing utilities: width (`w-*`, `w-screen`, `w-full`, `w-auto`, `w-min`/`w-max`/`w-fit`), height (`h-*`, `h-screen`, `h-full`, and the new `h-dvh` dynamic viewport height that accounts for browser UI), min/max constraints (`min-w-*`/`max-w-*`/`min-h-*`/`max-h-*`), and aspect-ratio (`aspect-square`, `aspect-video`, arbitrary ratios).Includes common composition patterns: full-screen containers, constrained content width, image/video wrappers, and sidebar layouts.</objective># Tailwind CSS Sizing UtilitiesComprehensive 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 WidthApply 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<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)

Frequently asked questions

Tailwindcss Sizing