sizing

Width, height, and min/max sizing utilities for Tailwind CSS

Width Utilities

Tailwind CSS provides utilities for setting the width of elements, supporting numeric scales, fractions, named sizes, and special values.

w = ScaledFactory("w", SIZE_CONFIG, "Width utilities for setting element width") # The width factory

Basic Width

Set the width of elements using numeric scales, fractions, or special values:

---

test_sizing_width_examples

def test_sizing_width_examples(
    
):

Test width utilities with various scales and values.

def test_sizing_width_examples(
):
    """Test width utilities with various scales and values."""
    # Numeric scales
    assert str(w(0)) == "w-0"
    assert str(w(4)) == "w-4"
    assert str(w(16)) == "w-16"
    assert str(w(64)) == "w-64"
    assert str(w(2.5)) == "w-2.5"
    
    # Fractions
    assert str(w("1/2")) == "w-1/2"
    assert str(w("1/3")) == "w-1/3"
    assert str(w("2/3")) == "w-2/3"
    assert str(w("3/4")) == "w-3/4"
    
    # Special values
    assert str(w.auto) == "w-auto"
    assert str(w.full) == "w-full"
    assert str(w.screen) == "w-screen"
    assert str(w.px) == "w-px"

# Run the tests
test_sizing_width_examples()

Named Sizes

Use container-based named sizes for consistent layouts:

---

test_sizing_width_named_examples

def test_sizing_width_named_examples(
    
):

Test width utilities with named container sizes.

def test_sizing_width_named_examples(
):
    """Test width utilities with named container sizes."""
    # Named container sizes
    assert str(w._3xs) == "w-3xs" # (16rem / 256px)
    assert str(w._2xs) == "w-2xs" # (18rem / 288px)
    assert str(w.xs) == "w-xs"   # (20rem / 320px)
    assert str(w.sm) == "w-sm"   # (24rem / 384px)
    assert str(w.md) == "w-md"   # (28rem / 448px)
    assert str(w.lg) == "w-lg"   # (32rem / 512px)
    assert str(w.xl) == "w-xl"   # (36rem / 576px)
    assert str(w._2xl) == "w-2xl" # (42rem / 672px)
    assert str(w._3xl) == "w-3xl" # (48rem / 768px)

# Run the tests
test_sizing_width_named_examples()

Viewport Units

Use viewport-relative widths:

---

test_sizing_width_viewport_examples

def test_sizing_width_viewport_examples(
    
):

Test width utilities with viewport units.

def test_sizing_width_viewport_examples(
):
    """Test width utilities with viewport units."""
    # Viewport width units
    assert str(w.svw) == "w-svw" # (small viewport width)
    assert str(w.lvw) == "w-lvw" # (large viewport width)
    assert str(w.dvw) == "w-dvw" # (dynamic viewport width)
    
    # Min/max content
    assert str(w.min) == "w-min"
    assert str(w.max) == "w-max"
    assert str(w.fit) == "w-fit"

# Run the tests
test_sizing_width_viewport_examples()

Arbitrary Values

Use custom values when needed:

---

test_sizing_arbitrary_examples

def test_sizing_arbitrary_examples(
    
):

Test sizing utilities with arbitrary and custom values.

def test_sizing_arbitrary_examples(
):
    """Test sizing utilities with arbitrary and custom values."""
    # Arbitrary values
    assert str(w("300px")) == "w-[300px]"
    assert str(w("25rem")) == "w-[25rem]"
    assert str(w("50%")) == "w-[50%]"
    assert str(w("calc(100% - 2rem)")) == "w-[calc(100% - 2rem)]"
    
    # Custom properties
    assert str(w("--sidebar-width")) == "w-(--sidebar-width)"
    assert str(w("--container-max")) == "w-(--container-max)"

# Run the tests
test_sizing_arbitrary_examples()

Height Utilities

Height utilities work exactly like width utilities but control the vertical dimension.

h = ScaledFactory("h", SIZE_CONFIG, "Height utilities for setting element height") # The height factory

Basic Height

Set the height of elements using the same scale system as width:

---

test_sizing_height_examples

def test_sizing_height_examples(
    
):

Test height utilities with various scales and values.

def test_sizing_height_examples(
):
    """Test height utilities with various scales and values."""
    # Numeric scales
    assert str(h(0)) == "h-0"
    assert str(h(16)) == "h-16"
    assert str(h(64)) == "h-64"
    
    # Fractions
    assert str(h("1/2")) == "h-1/2"
    assert str(h("1/3")) == "h-1/3"
    
    # Special values
    assert str(h.auto) == "h-auto"
    assert str(h.full) == "h-full"
    assert str(h.screen) == "h-screen"
    assert str(h.px) == "h-px"

# Run the tests
test_sizing_height_examples()

Viewport Height Units

Height utilities have specific viewport-relative units:

---

test_sizing_height_viewport_examples

def test_sizing_height_viewport_examples(
    
):

Test height utilities with viewport units.

def test_sizing_height_viewport_examples(
):
    """Test height utilities with viewport units."""
    # Viewport height units
    assert str(h.svh) == "h-svh" # (small viewport height)
    assert str(h.lvh) == "h-lvh" # (large viewport height)
    assert str(h.dvh) == "h-dvh" # (dynamic viewport height)
    
    # Min/max content
    assert str(h.min) == "h-min"
    assert str(h.max) == "h-max"
    assert str(h.fit) == "h-fit"
    
    # Line height unit
    assert str(h.lh) == "h-lh" # (1 line height)

# Run the tests
test_sizing_height_viewport_examples()

Min-Width Utilities

Control the minimum width an element can have.

---

test_sizing_min_width_examples

def test_sizing_min_width_examples(
    
):

Test min-width utilities.

min_w = ScaledFactory("min-w", SIZE_CONFIG, "Minimum width utilities for setting minimum element width") # The min-width factory

def test_sizing_min_width_examples(
):
    """Test min-width utilities."""
    # Numeric scales
    assert str(min_w(0)) == "min-w-0"
    assert str(min_w(16)) == "min-w-16"
    
    # Fractions
    assert str(min_w("1/2")) == "min-w-1/2"
    
    # Named sizes
    assert str(min_w.xs) == "min-w-xs"
    assert str(min_w.sm) == "min-w-sm"
    assert str(min_w.lg) == "min-w-lg"
    
    # Special values
    assert str(min_w.full) == "min-w-full"
    assert str(min_w.min) == "min-w-min"
    assert str(min_w.max) == "min-w-max"
    assert str(min_w.fit) == "min-w-fit"

# Run the tests
test_sizing_min_width_examples()

Max-Width Utilities

Control the maximum width an element can have.

---

test_sizing_max_width_examples

def test_sizing_max_width_examples(
    
):

Test max-width utilities.

max_w = ScaledFactory("max-w", SIZE_CONFIG, "Maximum width utilities for setting maximum element width") # The max-width factory

def test_sizing_max_width_examples(
):
    """Test max-width utilities."""
    # Named sizes (commonly used for content containers)
    assert str(max_w.xs) == "max-w-xs"
    assert str(max_w.sm) == "max-w-sm"
    assert str(max_w.md) == "max-w-md"
    assert str(max_w.lg) == "max-w-lg"
    assert str(max_w.xl) == "max-w-xl"
    assert str(max_w._2xl) == "max-w-2xl"
    assert str(max_w._3xl) == "max-w-3xl"
    assert str(max_w._4xl) == "max-w-4xl"
    assert str(max_w._5xl) == "max-w-5xl"
    assert str(max_w._6xl) == "max-w-6xl"
    assert str(max_w._7xl) == "max-w-7xl"
    
    # Special values
    assert str(max_w.none) == "max-w-none" # (default in Tailwind)
    assert str(max_w.full) == "max-w-full"
    assert str(max_w.min) == "max-w-min"
    assert str(max_w.max) == "max-w-max"
    assert str(max_w.fit) == "max-w-fit"
    assert str(max_w.screen) == "max-w-screen"

# Run the tests
test_sizing_max_width_examples()

---

test_sizing_container_examples

def test_sizing_container_examples(
    
):

Test continer utility.

# Container utility
container = SingleValueFactory(
    "container",
    "Responsive container with breakpoint-based max-widths"
)

def test_sizing_container_examples(
):
    """Test continer utility."""
    # Test that container works with combine_classes
    result = combine_classes(container, "mx-auto", "px-4")
    assert result == "container mx-auto px-4"
    
    # Test different ways to use container
    assert str(container) == "container"
    assert str(container()) == "container"
    assert container.build() == "container"

# Run the tests
test_sizing_container_examples()

Min-Height Utilities

Control the minimum height an element can have.

---

test_sizing_min_height_examples

def test_sizing_min_height_examples(
    
):

Test min-height utilities.

min_h = ScaledFactory("min-h", SIZE_CONFIG, "Minimum height utilities for setting minimum element height") # The min-height factory

def test_sizing_min_height_examples(
):
    """Test min-height utilities."""
    # Numeric scales
    assert str(min_h(0)) == "min-h-0"
    assert str(min_h(16)) == "min-h-16"
    
    # Special values
    assert str(min_h.full) == "min-h-full"
    assert str(min_h.screen) == "min-h-screen"
    assert str(min_h.px) == "min-h-px"
    
    # Viewport units
    assert str(min_h.svh) == "min-h-svh"
    assert str(min_h.lvh) == "min-h-lvh"
    assert str(min_h.dvh) == "min-h-dvh"

# Run the tests
test_sizing_min_height_examples()

Max-Height Utilities

Control the maximum height an element can have.

max_h = ScaledFactory("max-h", SIZE_CONFIG, "Maximum height utilities for setting maximum element height") # The max-height factory

Size Utilities

Control both width and height of an element with a single utility.

---

test_sizing_size_util_examples

def test_sizing_size_util_examples(
    
):

Test size utilities that set both width and height.

size_util = ScaledFactory("size", SIZE_CONFIG, "Size utilities for setting both width and height simultaneously") # The size factory (sets both width and height)

def test_sizing_size_util_examples(
):
    """Test size utilities that set both width and height."""
    # Size utilities set both width and height
    assert str(size_util(16)) == "size-16"
    assert str(size_util("1/2")) == "size-1/2"
    assert str(size_util.auto) == "size-auto"
    assert str(size_util.px) == "size-px"
    assert str(size_util.full) == "size-full"
    assert str(size_util.min) == "size-min"
    assert str(size_util.max) == "size-max"
    assert str(size_util.fit) == "size-fit"
    
    # Viewport units (sets square dimensions)
    assert str(size_util.dvw) == "size-dvw"
    assert str(size_util.dvh) == "size-dvh"
    assert str(size_util.lvw) == "size-lvw"
    assert str(size_util.lvh) == "size-lvh"
    assert str(size_util.svw) == "size-svw"
    assert str(size_util.svh) == "size-svh"

# Run the tests
test_sizing_size_util_examples()

---

test_sizing_max_height_examples

def test_sizing_max_height_examples(
    
):

Test max-height utilities.

def test_sizing_max_height_examples(
):
    """Test max-height utilities."""
    # Numeric scales
    assert str(max_h(0)) == "max-h-0"
    assert str(max_h(16)) == "max-h-16"
    assert str(max_h(64)) == "max-h-64"
    assert str(max_h(96)) == "max-h-96"
    
    # Special values
    assert str(max_h.none) == "max-h-none"
    assert str(max_h.full) == "max-h-full"
    assert str(max_h.screen) == "max-h-screen"
    assert str(max_h.px) == "max-h-px"
    
    # Viewport units
    assert str(max_h.svh) == "max-h-svh"
    assert str(max_h.lvh) == "max-h-lvh"
    assert str(max_h.dvh) == "max-h-dvh"

# Run the tests
test_sizing_max_height_examples()

Practical Examples

Let’s see how to use these sizing utilities in real FastHTML components:

---

test_sizing_fasthtml_examples

def test_sizing_fasthtml_examples(
    
):

Test sizing utilities in practical FastHTML component examples.

def test_sizing_fasthtml_examples(
):
    """Test sizing utilities in practical FastHTML component examples."""
    from fasthtml.common import Div, Img, Article, Header, Main, Aside
    from cjm_fasthtml_tailwind.utilities.layout import display_tw, position, object_fit
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, flex_display, grid_display
    
    # Card with constrained width
    card = Div(
        "Card content",
        cls=combine_classes(w.full, max_w.md, h.auto)
    )
    assert card.attrs['class'] == "w-full max-w-md h-auto"
    
    # Full-screen hero section
    hero = Div(
        "Hero content",
        cls=combine_classes(w.full, h.screen, min_h.screen)
    )
    assert hero.attrs['class'] == "w-full h-screen min-h-screen"
    
    # Responsive image container
    image_container = Div(
        Img(src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp", cls=combine_classes(w.full, h.full, object_fit.cover)),
        cls=combine_classes(w("1/2"), h(64), max_h(96))
    )
    assert image_container.attrs['class'] == "w-1/2 h-64 max-h-96"
    assert image_container.children[0].attrs['class'] == "w-full h-full object-cover"
    
    # Layout with sidebar
    layout = Div(
        Aside("Sidebar", cls=combine_classes(w(64), min_w(48), h.full)),
        Main("Main content", cls=combine_classes(w.full, min_h.screen)),
        cls=str(flex_display)
    )
    assert layout.children[0].attrs['class'] == "w-64 min-w-48 h-full"
    assert layout.children[1].attrs['class'] == "w-full min-h-screen"
    
    # Content container with max width
    article = Article(
        Header("Article Title"),
        Div("Article content..."),
        cls=combine_classes(w.full, max_w._4xl, m.x.auto, min_h("50vh"))
    )
    assert article.attrs['class'] == "w-full max-w-4xl mx-auto min-h-[50vh]"
    
    # Using the size utility for square elements
    avatar = Div(
        Img(src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp", cls=str(rounded.full)),
        cls=combine_classes(size_util(16), position.relative)
    )
    assert avatar.attrs['class'] == "size-16 relative"
    
    # Using container utility
    page_container = Div(
        "Page content",
        cls=combine_classes(container, m.x.auto, p.x(4))
    )
    assert page_container.attrs['class'] == "container mx-auto px-4"
    
    # Return all examples in a grid layout
    return Div(
        card,
        hero,
        image_container,
        layout,
        article,
        avatar,
        page_container,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_sizing_fasthtml_examples()

Card content

Hero content

Sidebar

Main content

Article Title

Article content...

Page content

test_func = test_sizing_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

Helper Functions

Convenient functions for common sizing patterns:

---

size

def size(
    w:Union=None, # Width value
    h:Union=None, # Height value
    min_w:Union=None, # Minimum width
    max_w:Union=None, # Maximum width
    min_h:Union=None, # Minimum height
    max_h:Union=None, # Maximum height
)->str: # Space-separated size classes

Generate size classes with a convenient API.

---

square

def square(
    size:Union, # Size value for both width and height
)->str: # Space-separated width and height classes

Create a square element with equal width and height.

---

full_size

def full_size(
    
)->str: # "w-full h-full"

Make element take full width and height of parent.

---

full_screen

def full_screen(
    
)->str: # "w-screen h-screen"

Make element take full viewport width and height.

---

test_sizing_helper_examples

def test_sizing_helper_examples(
    
):

Test helper functions for common sizing patterns.

def test_sizing_helper_examples(
):
    """Test helper functions for common sizing patterns."""
    # Test helper functions
    assert size(w=32, h=16) == "w-32 h-16"
    assert size(w="full", max_w="4xl", min_h="50vh") == "w-full max-w-4xl min-h-[50vh]"
    assert square(16) == "w-16 h-16"
    assert full_size() == "w-full h-full"
    assert full_screen() == "w-screen h-screen"

# Run the tests
test_sizing_helper_examples()

Export