layout

Display, position, overflow, z-index and other layout utilities for Tailwind CSS

Display Utilities

Tailwind CSS provides utilities for controlling the display box type of an element.

test_layout_display_examples


def test_layout_display_examples(
    
):

Test display utilities with various values.

Exported source 
DISPLAY_VALUES = { # Display utilities for general display types (not flex/grid/table)
    "inline": "inline",
    "block": "block", 
    "inline-block": "inline-block",
    "flow-root": "flow-root",
    "contents": "contents",
    "list-item": "list-item",
    "hidden": "hidden",
    "none": "none"
}

display_tw = SimpleFactory(DISPLAY_VALUES, "Display utilities for controlling the display box type of an element") # The display factory for general display types
Exported source 
def test_layout_display_examples(
):
    """Test display utilities with various values."""
    # Test display utilities with dot notation
    assert str(display_tw.block) == "block"
    assert str(display_tw.inline) == "inline"
    assert str(display_tw.hidden) == "hidden"
    assert str(display_tw.inline_block) == "inline-block"
    assert str(display_tw.flow_root) == "flow-root"
    assert str(display_tw.contents) == "contents"
    assert str(display_tw.list_item) == "list-item"
    assert str(display_tw.none) == "none"

# Run the tests
test_layout_display_examples()

Position Utilities

Control how an element is positioned in the document.

test_layout_position_examples


def test_layout_position_examples(
    
):

Test position utilities.

Exported source 
POSITION_VALUES = { # Position utilities
    "static": "static",
    "fixed": "fixed",
    "absolute": "absolute",
    "relative": "relative",
    "sticky": "sticky"
}

position = SimpleFactory(POSITION_VALUES, "Position utilities for controlling how an element is positioned in the document") # The position factory
Exported source 
def test_layout_position_examples(
):
    """Test position utilities."""
    # Test position utilities with dot notation
    assert str(position.static) == "static"
    assert str(position.relative) == "relative"
    assert str(position.absolute) == "absolute"
    assert str(position.fixed) == "fixed"
    assert str(position.sticky) == "sticky"

# Run the tests
test_layout_position_examples()

Inset Utilities (Top/Right/Bottom/Left)

Control the placement of positioned elements.

InsetDirectionalFactory


def InsetDirectionalFactory(
    prefix:str, # The base prefix ('inset')
    config:ScaleConfig, # Configuration defining valid scales and values
):

Special factory for inset utilities that use hyphenated directions.

test_layout_inset_examples


def test_layout_inset_examples(
    
):

Test inset utilities for positioning elements.

Exported source 
# Inset utilities (top, right, bottom, left)
inset = InsetDirectionalFactory("inset", INSET_CONFIG) # The inset factory for positioning

# Individual direction utilities don't need special handling
top = ScaledFactory("top", INSET_CONFIG, "Top position utilities for controlling vertical placement")
right = ScaledFactory("right", INSET_CONFIG, "Right position utilities for controlling horizontal placement")
bottom = ScaledFactory("bottom", INSET_CONFIG, "Bottom position utilities for controlling vertical placement")
left = ScaledFactory("left", INSET_CONFIG, "Left position utilities for controlling horizontal placement")
start = ScaledFactory("start", INSET_CONFIG, "Logical start position utilities (left in LTR, right in RTL)")
end = ScaledFactory("end", INSET_CONFIG, "Logical end position utilities (right in LTR, left in RTL)")
Exported source 
def test_layout_inset_examples(
):
    """Test inset utilities for positioning elements."""
    # Test inset utilities
    assert str(inset(0)) == "inset-0"
    assert str(inset(4)) == "inset-4"
    assert str(inset("1/2")) == "inset-1/2"
    assert str(inset.auto) == "inset-auto"
    assert str(inset.full) == "inset-full"
    assert str(inset.negative(4)) == "-inset-4"
    
    # Test directional inset
    assert str(inset.x(4)) == "inset-x-4"
    assert str(inset.y(8)) == "inset-y-8"
    
    # Test individual directions
    assert str(top(0)) == "top-0"
    assert str(right(4)) == "right-4"
    assert str(bottom.auto) == "bottom-auto"
    assert str(left.negative(2)) == "-left-2"

# Run the tests
test_layout_inset_examples()

Overflow Utilities

Control how an element handles content that is too large for the container.

OverflowFactory


def OverflowFactory(
    
):

Factory for overflow utilities with directional support.

Exported source 
OVERFLOW_VALUES = ["auto", "hidden", "clip", "visible", "scroll"] # Overflow values

test_layout_overflow_examples


def test_layout_overflow_examples(
    
):

Test overflow utilities for content handling.

Exported source 
overflow = OverflowFactory() # The overflow factory
Exported source 
def test_layout_overflow_examples(
):
    """Test overflow utilities for content handling."""
    # Test overflow utilities
    assert str(overflow.auto) == "overflow-auto"
    assert str(overflow.hidden) == "overflow-hidden"
    assert str(overflow.visible) == "overflow-visible"
    
    # Directional overflow utilities
    assert str(overflow.x.auto) == "overflow-x-auto"
    assert str(overflow.y.scroll) == "overflow-y-scroll"
    assert str(overflow.x.visible) == "overflow-x-visible"
    assert str(overflow.y.visible) == "overflow-y-visible"
    assert str(overflow.y.clip) == "overflow-y-clip"

# Run the tests
test_layout_overflow_examples()

Z-Index Utilities

Control the stack order of an element.

test_layout_z_index_examples


def test_layout_z_index_examples(
    
):

Test z-index utilities for stack ordering.

Exported source 
Z_INDEX_CONFIG = ScaleConfig( # Z-index configuration
    numeric=True,  # Support numeric values 0-50
    decimals=False,
    fractions=False,
    named=None,
    special={
        "auto": "auto"
    },
    negative=True  # Support negative z-index
)

# Create z-index factory
z = ScaledFactory("z", Z_INDEX_CONFIG, "Z-index utilities for controlling the stack order of an element") # The z-index factory
Exported source 
def test_layout_z_index_examples(
):
    """Test z-index utilities for stack ordering."""
    # Test z-index utilities
    assert str(z(0)) == "z-0"
    assert str(z(10)) == "z-10"
    assert str(z(20)) == "z-20"
    assert str(z(50)) == "z-50"
    assert str(z.auto) == "z-auto"
    assert str(z.negative(10)) == "-z-10"
    assert str(z("999")) == "z-[999]" # (string number without units)
    assert str(z("[999]")) == "z-[999]" # (explicit arbitrary value)

# Run the tests
test_layout_z_index_examples()

Float Utilities

Control the wrapping of content around an element.

Exported source 
# Float utilities
FLOAT_VALUES = {
    "right": "float-right",
    "left": "float-left",
    "start": "float-start",
    "end": "float-end",
    "none": "float-none"
}

float_tw = SimpleFactory(FLOAT_VALUES, "Float utilities for controlling the wrapping of content around an element")  # Renamed to avoid conflict with Python's float

Clear Utilities

Control the wrapping behavior of an element after floating elements.

test_layout_float_clear_examples


def test_layout_float_clear_examples(
    
):

Test float and clear utilities for content wrapping.

Exported source 
# Clear utilities
CLEAR_VALUES = {
    "left": "clear-left",
    "right": "clear-right",
    "both": "clear-both",
    "start": "clear-start",
    "end": "clear-end",
    "none": "clear-none"
}

# Create clear factory
clear = SimpleFactory(CLEAR_VALUES, "Clear utilities for controlling wrapping behavior after floating elements") # The clear factory
Exported source 
def test_layout_float_clear_examples(
):
    """Test float and clear utilities for content wrapping."""
    # Test float utilities
    assert str(float_tw.right) == "float-right"
    assert str(float_tw.left) == "float-left"
    assert str(float_tw.start) == "float-start"
    assert str(float_tw.end) == "float-end"
    assert str(float_tw.none) == "float-none"
    
    # Test clear utilities
    assert str(clear.left) == "clear-left"
    assert str(clear.right) == "clear-right"
    assert str(clear.both) == "clear-both"
    assert str(clear.start) == "clear-start"
    assert str(clear.end) == "clear-end"
    assert str(clear.none) == "clear-none"

# Run the tests
test_layout_float_clear_examples()

Object Fit Utilities

Control how a replaced element’s content should be resized.

Exported source 
# Object fit utilities
OBJECT_FIT_VALUES = {
    "contain": "object-contain",
    "cover": "object-cover",
    "fill": "object-fill",
    "none": "object-none",
    "scale-down": "object-scale-down"
}

# Create object fit factory
object_fit = SimpleFactory(OBJECT_FIT_VALUES, "Object fit utilities for controlling how replaced element content should be resized") # The object fit factory

Object Position Utilities

Control how a replaced element’s content should be positioned within its container.

ObjectPositionFactory


def ObjectPositionFactory(
    values_dict:Optional=None, # Dictionary mapping attribute names to CSS values
    doc:Optional=None, # Optional documentation string
):

Factory for object position with both fixed and custom values.

Exported source 
# Object position utilities - combines fixed positions with custom value support
OBJECT_POSITION_VALUES = {
    "top-left": "object-top-left",
    "top": "object-top",
    "top-right": "object-top-right",
    "left": "object-left",
    "center": "object-center",
    "right": "object-right",
    "bottom-left": "object-bottom-left",
    "bottom": "object-bottom",
    "bottom-right": "object-bottom-right"
}

test_layout_object_examples


def test_layout_object_examples(
    
):

Test object fit and position utilities.

Exported source 
# Create object position factory
object_position = ObjectPositionFactory(
    OBJECT_POSITION_VALUES, 
    "Object position utilities for controlling content positioning within its container"
) # The object position factory
Exported source 
def test_layout_object_examples(
):
    """Test object fit and position utilities."""
    # Test object fit utilities
    assert str(object_fit.contain) == "object-contain"
    assert str(object_fit.cover) == "object-cover"
    assert str(object_fit.fill) == "object-fill"
    assert str(object_fit.none) == "object-none"
    assert str(object_fit.scale_down) == "object-scale-down"
    
    # Test object position utilities with dot notation
    assert str(object_position.center) == "object-center"
    assert str(object_position.top) == "object-top"
    assert str(object_position.bottom_right) == "object-bottom-right"
    assert str(object_position("50% 25%")) == "object-[50% 25%]"
    assert str(object_position("--custom-position")) == "object-(--custom-position)"

# Run the tests
test_layout_object_examples()

Visibility Utilities

Control the visibility of an element.

Exported source 
# Visibility utilities
VISIBILITY_VALUES = {
    "visible": "visible",
    "invisible": "invisible",
    "collapse": "collapse"
}

# Create visibility factory
visibility = SimpleFactory(VISIBILITY_VALUES, "Visibility utilities for controlling the visibility of an element") # The visibility factory

Box Sizing Utilities

Control how the browser should calculate an element’s total size.

test_layout_visibility_examples


def test_layout_visibility_examples(
    
):

Test visibility and box sizing utilities.

Exported source 
# Box sizing utilities
BOX_SIZING_VALUES = {
    "border": "box-border",
    "content": "box-content"
}

# Create box sizing factory
box = SimpleFactory(BOX_SIZING_VALUES, "Box sizing utilities for controlling how the browser calculates element size") # The box sizing factory
Exported source 
def test_layout_visibility_examples(
):
    """Test visibility and box sizing utilities."""
    # Test visibility utilities
    assert str(visibility.visible) == "visible"
    assert str(visibility.invisible) == "invisible"
    assert str(visibility.collapse) == "collapse"
    
    # Test box sizing utilities
    assert str(box.border) == "box-border"
    assert str(box.content) == "box-content"

# Run the tests
test_layout_visibility_examples()

Isolation Utilities

Control whether an element should explicitly create a new stacking context.

Exported source 
# Isolation utilities
ISOLATION_VALUES = {
    "isolate": "isolate",
    "auto": "isolation-auto"
}

# Create isolation factory
isolation = SimpleFactory(ISOLATION_VALUES, "Isolation utilities for creating a new stacking context") # The isolation factory

Aspect Ratio Utilities

Control the aspect ratio of an element.

AspectRatioFactory


def AspectRatioFactory(
    values_dict:Optional=None, # Dictionary mapping attribute names to CSS values
    doc:Optional=None, # Optional documentation string
):

Factory for aspect ratio with both fixed and custom values.

Exported source 
# Aspect ratio utilities - fixed values with custom ratio support
ASPECT_RATIO_VALUES = {
    "auto": "aspect-auto",
    "square": "aspect-square",
    "video": "aspect-video"
}

test_layout_aspect_columns_examples


def test_layout_aspect_columns_examples(
    
):

Test aspect ratio and columns utilities.

Exported source 
# Create aspect ratio factory
aspect = AspectRatioFactory(ASPECT_RATIO_VALUES, "Aspect ratio utilities for controlling element proportions") # The aspect ratio factory
Exported source 
def test_layout_aspect_columns_examples(
):
    """Test aspect ratio and columns utilities."""
    # Test aspect ratio utilities with dot notation
    assert str(aspect.auto) == "aspect-auto"
    assert str(aspect.square) == "aspect-square"
    assert str(aspect.video) == "aspect-video"
    assert str(aspect("16/9")) == "aspect-16/9"
    assert str(aspect("4/3")) == "aspect-4/3"
    assert str(aspect("--custom")) == "aspect-(--custom)"

# Run the tests
test_layout_aspect_columns_examples()

Columns Utilities

Control the number of columns within an element.

test_layout_columns_examples


def test_layout_columns_examples(
    
):

Test columns utilities.

Exported source 
COLUMNS_CONFIG = ScaleConfig( # Columns configuration with container sizes
    numeric=True,  # Support columns-1 through columns-12
    decimals=False,
    fractions=False,
    named=CONTAINER_SCALES,  # Use all container scales (3xs through 7xl)
    special={
        "auto": "auto"
    },
    negative=False
)

# Create columns factory
columns = ScaledFactory("columns", COLUMNS_CONFIG, "Columns utilities for controlling the number of columns within an element") # The columns factory
Exported source 
def test_layout_columns_examples(
):
    """Test columns utilities."""
    # Test columns utilities
    assert str(columns(1)) == "columns-1"
    assert str(columns(2)) == "columns-2"
    assert str(columns(3)) == "columns-3"
    assert str(columns.auto) == "columns-auto"
    assert str(columns.xs) == "columns-xs"
    assert str(columns.sm) == "columns-sm"
    assert str(columns.lg) == "columns-lg"
    assert str(columns._3xl) == "columns-3xl"
    assert str(columns._4xl) == "columns-4xl"
    assert str(columns._5xl) == "columns-5xl"
    assert str(columns._6xl) == "columns-6xl"
    assert str(columns._7xl) == "columns-7xl"

# Run the tests
test_layout_columns_examples()

Break Utilities

Control column and page breaks.

BreakFactory


def BreakFactory(
    
):

Factory for break utilities with before, after, and inside sub-factories.

Exported source 
# Break utilities - organized by type
BREAK_BEFORE_VALUES = {
    "auto": "break-before-auto",
    "avoid": "break-before-avoid",
    "all": "break-before-all",
    "avoid-page": "break-before-avoid-page",
    "page": "break-before-page",
    "left": "break-before-left",
    "right": "break-before-right",
    "column": "break-before-column"
}

BREAK_AFTER_VALUES = {
    "auto": "break-after-auto",
    "avoid": "break-after-avoid",
    "all": "break-after-all",
    "avoid-page": "break-after-avoid-page",
    "page": "break-after-page",
    "left": "break-after-left",
    "right": "break-after-right",
    "column": "break-after-column"
}

BREAK_INSIDE_VALUES = {
    "auto": "break-inside-auto",
    "avoid": "break-inside-avoid",
    "avoid-page": "break-inside-avoid-page",
    "avoid-column": "break-inside-avoid-column"
}
Exported source 
# Create the break factory
break_util = BreakFactory() # The break factory

Box Decoration Break Utilities

Control how element fragments should be rendered across multiple lines, columns, or pages.

Exported source 
# Box decoration break utilities
BOX_DECORATION_VALUES = {
    "clone": "box-decoration-clone",
    "slice": "box-decoration-slice"
}

# Create box decoration factory
box_decoration = SimpleFactory(
    BOX_DECORATION_VALUES, 
    "Box decoration break utilities for controlling element fragment rendering across breaks"
) # The box decoration factory

Overscroll Behavior Utilities

Control how the browser behaves when reaching the boundary of a scrolling area.

OverscrollFactory


def OverscrollFactory(
    
):

Factory for overscroll behavior utilities with directional support.

Exported source 
# Overscroll behavior values
OVERSCROLL_VALUES = ["auto", "contain", "none"]

test_layout_other_utilities_examples


def test_layout_other_utilities_examples(
    
):

Test isolation, break, box decoration, and overscroll utilities.

Exported source 
# Create the overscroll factory
overscroll = OverscrollFactory() # The overscroll factory
Exported source 
def test_layout_other_utilities_examples(
):
    """Test isolation, break, box decoration, and overscroll utilities."""
    # Test isolation utilities
    assert str(isolation.isolate) == "isolate"
    assert str(isolation.auto) == "isolation-auto"
    
    # Test break utilities
    assert str(break_util.before.auto) == "break-before-auto"
    assert str(break_util.before.page) == "break-before-page"
    assert str(break_util.after.column) == "break-after-column"
    assert str(break_util.inside.avoid) == "break-inside-avoid"
    
    # Test box decoration break utilities
    assert str(box_decoration.clone) == "box-decoration-clone"
    assert str(box_decoration.slice) == "box-decoration-slice"
    
    # Test overscroll behavior utilities
    assert str(overscroll.auto) == "overscroll-auto"
    assert str(overscroll.contain) == "overscroll-contain"
    assert str(overscroll.none) == "overscroll-none"
    assert str(overscroll.x.auto) == "overscroll-x-auto"
    assert str(overscroll.y.contain) == "overscroll-y-contain"

# Run the tests
test_layout_other_utilities_examples()

Practical Examples

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

test_layout_fasthtml_examples


def test_layout_fasthtml_examples(
    
):

Test layout utilities in practical FastHTML component examples.

Exported source 
def test_layout_fasthtml_examples(
):
    """Test layout utilities in practical FastHTML component examples."""
    from fasthtml.common import Div, Img, Header, Nav, Main, Section, Article, Aside
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import items, justify, gap, flex_display, grid_display
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    
    # Fixed header with z-index
    header = Header(
        Nav("Navigation"),
        cls=combine_classes(position.fixed, top(0), left(0), right(0), z(50), bg.white)
    )
    assert header.attrs['class'] == "fixed top-0 left-0 right-0 z-50 bg-white"
    
    # Sticky sidebar with scroll
    sidebar = Aside(
        "Sidebar content",
        cls=combine_classes(position.sticky, top(20), h.screen, overflow.y.auto)
    )
    assert sidebar.attrs['class'] == "sticky top-20 h-screen overflow-y-auto"
    
    # Modal overlay with z-index
    modal_overlay = Div(
        Div("Modal content", cls=combine_classes(position.relative, z(10))),
        cls=combine_classes(position.fixed, inset(0), z(40), flex_display, items.center, justify.center, bg.black.opacity(50))
    )
    assert modal_overlay.attrs['class'] == "fixed inset-0 z-40 flex items-center justify-center bg-black/50"
    assert modal_overlay.children[0].attrs['class'] == "relative z-10"
    
    # Image with aspect ratio and object fit
    image_container = Div(
        Img(src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp", cls=combine_classes(object_fit.cover, object_position.center, w.full, h.full)),
        cls=combine_classes(aspect.video, overflow.hidden, rounded.lg)
    )
    assert image_container.attrs['class'] == "aspect-video overflow-hidden rounded-lg"
    assert image_container.children[0].attrs['class'] == "object-cover object-center w-full h-full"
    
    # Multi-column layout
    # Note: 'prose' is from Tailwind Typography plugin and doesn't have a factory yet
    article = Article(
        "Lorem ipsum dolor sit amet...",
        cls=combine_classes(columns(2), gap(8), "prose")
    )
    assert article.attrs['class'] == "columns-2 gap-8 prose"
    
    # Return all examples in a grid layout
    return Div(
        header,
        sidebar,
        modal_overlay,
        image_container,
        article,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_layout_fasthtml_examples()
Modal content
Lorem ipsum dolor sit amet...
test_func = test_layout_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()

test_layout_enhanced_factories_fasthtml_examples


def test_layout_enhanced_factories_fasthtml_examples(
    
):

Test enhanced factories with modifier support in practical examples.

Exported source 
def test_layout_enhanced_factories_fasthtml_examples(
):
    """Test enhanced factories with modifier support in practical examples."""
    from fasthtml.common import Div, Nav, Button, Span
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
    from cjm_fasthtml_tailwind.utilities.accessibility import sr_only
    
    # Mobile navigation with responsive display
    mobile_nav = Nav(
        Button("Menu", cls="md:hidden"),
        Div(
            "Navigation items",
            cls=combine_classes(
                display_tw.none.md,  # Hidden by default, shown on md+
                position.fixed.md,   # Fixed position on larger screens
                "w-full md:w-auto"
            )
        )
    )
    assert "md:none" in mobile_nav.children[1].attrs['class']
    assert "md:fixed" in mobile_nav.children[1].attrs['class']
    
    # Dropdown menu with hover states
    dropdown = Div(
        Button("Options", cls="relative"),
        Div(
            "Dropdown content",
            cls=combine_classes(
                display_tw.none.group("hover"),  # Show on parent hover
                position.absolute,
                "mt-2 bg-white shadow-lg"
            )
        ),
        cls="group relative"
    )
    assert "group-hover:none" in dropdown.children[1].attrs['class']
    
    # Accessible skip link
    skip_link = Div(
        "Skip to content",
        cls=combine_classes(
            sr_only.focus,           # Hidden but shown on focus
            position.absolute.focus, # Position when focused
            "top-4 left-4 bg-white p-2 z-50"
        )
    )
    assert "focus:sr-only" in skip_link.attrs['class']
    assert "focus:absolute" in skip_link.attrs['class']
    
    # Responsive overflow handling
    table_container = Div(
        "Table content",
        cls=combine_classes(
            overflow.x.auto,              # Always allow horizontal scroll
            overflow.y.hidden.md,         # Hide vertical scroll on medium+
            "border rounded"
        )
    )
    assert "overflow-x-auto" in table_container.attrs['class']
    assert "md:overflow-y-hidden" in table_container.attrs['class']

    return Div(
        mobile_nav,
        dropdown,
        skip_link,
        table_container,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_layout_enhanced_factories_fasthtml_examples()
Dropdown content
Skip to content
Table content
test_func = test_layout_enhanced_factories_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()

test_layout_modifier_examples


def test_layout_modifier_examples(
    
):

Test layout utilities with modifiers for conditional styling.

Exported source 
def test_layout_modifier_examples(
):
    """Test layout utilities with modifiers for conditional styling."""
    # Test display utilities with modifiers (now supported!)
    assert str(display_tw.hidden) == "hidden"
    assert str(display_tw.block) == "block"
    assert str(display_tw.hidden.hover) == "hover:hidden"
    assert str(display_tw.block.md) == "md:block"
    assert str(display_tw.none.dark) == "dark:none"
    
    # Test position utilities with modifiers (now supported!)
    assert str(position.fixed) == "fixed"
    assert str(position.absolute.hover) == "hover:absolute"
    assert str(position.relative.lg) == "lg:relative"
    assert str(position.sticky.md.dark) == "dark:md:sticky"
    
    # Test inset utilities with modifiers (these already supported modifiers)
    assert str(inset(0).hover) == "hover:inset-0"
    assert str(top(4).md) == "md:top-4"
    assert str(bottom.auto.lg) == "lg:bottom-auto"
    assert str(left.negative(2).hover) == "hover:-left-2"
    
    # Test z-index with modifiers
    assert str(z(10).hover) == "hover:z-10"
    assert str(z(50).lg) == "lg:z-50"
    assert str(z.auto.dark) == "dark:z-auto"
    
    # Test overflow utilities with modifiers (now supported!)
    assert str(overflow.hidden) == "overflow-hidden"
    assert str(overflow.auto.hover) == "hover:overflow-auto"
    assert str(overflow.x.scroll.md) == "md:overflow-x-scroll"
    assert str(overflow.y.hidden.dark) == "dark:overflow-y-hidden"
    
    # Test float utilities with modifiers (now supported!)
    assert str(float_tw.right) == "float-right"
    assert str(float_tw.left.hover) == "hover:float-left"
    assert str(float_tw.none.lg) == "lg:float-none"
    
    # Test clear utilities with modifiers (now supported!)
    assert str(clear.both) == "clear-both"
    assert str(clear.left.md) == "md:clear-left"
    assert str(clear.none.hover) == "hover:clear-none"
    
    # Test responsive inset
    assert str(inset.x(4).sm) == "sm:inset-x-4"
    assert str(inset.y(8).md) == "md:inset-y-8"
    
    # Test group/peer modifiers
    assert str(z(20).group("hover")) == "group-hover:z-20"
    assert str(position.fixed.group("focus")) == "group-focus:fixed"
    assert str(display_tw.none.peer("checked")) == "peer-checked:none"
    
    # Test arbitrary modifiers
    assert str(top(0).aria("expanded")) == "aria-expanded:top-0"
    assert str(position.absolute.data("open")) == "data-[open]:absolute"
    assert str(display_tw.block.has(":checked")) == "has-[:checked]:block"

# Run the tests
test_layout_modifier_examples()

Helper Functions

Convenient functions for common layout patterns:

center_absolute


def center_absolute(
    
)->str: # Combined CSS classes for centering an element

Center an absolutely positioned element.

stack_context


def stack_context(
    z_value:int=10, # The z-index value for the stacking context
)->str: # Combined CSS classes for creating a stacking context

Create a stacking context with z-index.

sticky_top


def sticky_top(
    offset:Union=0, # Top offset value (e.g., 0, 4, '1rem')
)->str: # Combined CSS classes for sticky positioning

Make element sticky at top with optional offset.

full_bleed


def full_bleed(
    
)->str: # Combined CSS classes for full-bleed layout

Make element break out of container constraints.

test_layout_helper_examples


def test_layout_helper_examples(
    
):

Test helper functions for common layout patterns.

Exported source 
def test_layout_helper_examples(
):
    """Test helper functions for common layout patterns."""
    # Test helper functions
    assert center_absolute() == "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
    assert stack_context(20) == "relative z-20"
    assert sticky_top(4) == "sticky top-4"
    assert full_bleed() == "relative left-1/2 right-1/2 -mx-[50vw] w-screen"

# Run the tests
test_layout_helper_examples()

Export