agentsclimarketplace
Sign in

Tailwindcss sizing

Skill fusengine/agents/plugins/tailwindcss/skills/tailwindcss-sizing

Use when setting element width/height, constraining min/max dimensions, using dynamic viewport height (h-dvh), or fixing an aspect ratio.From its SKILL.md

Install
npx -y skills add fusengine/agents --skill tailwindcss-sizing

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.1 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 2 files

10.8 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.