Files
zhaoguiyang.site/.agents/skills/tailwindcss/references/layout-min-max-sizing.md
zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding
- Created `openspec-ff-change` skill for fast-forward artifact creation.
- Introduced `openspec-new-change` skill for structured change creation.
- Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow.
- Added `openspec-sync-specs` skill for syncing delta specs to main specs.
- Implemented `openspec-verify-change` skill for verifying implementation against change artifacts.
- Updated `.gitignore` to exclude OpenSpec generated files.
- Added `skills-lock.json` to manage skill dependencies.
2026-03-13 13:18:03 +08:00

1.8 KiB
Raw Permalink Blame History

name, description
name description
layout-min-max-sizing Setting minimum and maximum width and height with min-w, max-w, min-h, max-h

Min & Max Sizing

Utilities for constraining element dimensions with minimum and maximum width/height.

Usage

Min width

<!-- Spacing scale -->
<div class="min-w-24">min-w-24</div>
<div class="min-w-64">min-w-64</div>

<!-- Percentage -->
<div class="min-w-full">min-w-full</div>
<div class="min-w-3/4">min-w-3/4</div>

<!-- Container scale -->
<div class="min-w-sm">min-w-sm</div>
<div class="min-w-xl">min-w-xl</div>

<!-- Content-based -->
<div class="min-w-min">min-content</div>
<div class="min-w-max">max-content</div>
<div class="min-w-fit">fit-content</div>
<div class="min-w-auto">auto</div>

<!-- Custom -->
<div class="min-w-[220px]">Custom</div>

Max width

Use max-w-<value> with similar scales: spacing numbers, fractions (max-w-1/2), container sizes (max-w-md), max-w-full, max-w-screen, max-w-min, max-w-max, max-w-fit, max-w-none.

Min / Max height

<div class="min-h-screen">At least full viewport height</div>
<div class="min-h-0">Allow shrinking in flex</div>
<div class="max-h-96 overflow-y-auto">Scrollable with max height</div>

Key Points

  • min-w: spacing scale, fractions, container scale (3xs7xl), full, screen, min, max, fit, auto
  • max-w: same options plus none
  • min-h / max-h: similar scales; min-h-0 important for flex children to shrink
  • Viewport units: min-w-screen, min-w-dvw, min-w-svw, min-w-lvw
  • Container scale: min-w-3xs through min-w-7xl map to --container-* variables