astralpacketcore4.lol

MrWriter:

Written by

ge9mHxiUqTAm

in

py-1 [&>p]:inline

This article explains the utility-first Tailwind CSS utility combination py-1 [&>p]:inline, what each part does, when to use it, and practical examples.

What it means

  • py-1 — sets vertical padding (padding-top and padding-bottom) to 0.25rem (Tailwind’s spacing scale) on the element.
  • [&>p]:inline — uses Tailwind’s arbitrary selector feature to target direct child

    elements and apply the inline display to them.

Combined, the class string applies small vertical padding to the container and forces its immediate

children to render inline rather than block-level.

Why you might use this

  • Preserve vertical spacing on a container while making paragraph children flow inline (useful for mixed inline elements, compact metadata lines, or single-line paragraph fragments).
  • Avoid default paragraph spacing (block behavior) without changing every

    manually in markup.

  • Create compact UI elements where semantic

    tags are desired but block layout is not.

Behavior notes

  • [&>p]:inline only targets immediate child

    elements. Nested

    elements deeper than direct children are unaffected.

  • Inline elements do not accept vertical margins in the same way as block elements; expect layout changes (no automatic line breaks).
  • The container’s py-1 still applies vertical padding regardless of children being inline.
  • If child paragraphs contain block-level descendants (e.g.,
    ), those descendants may break layout unexpectedly.

Examples

  1. Compact author line
html
<div class=“py-1 [&>p]:inline”><p>By Jane Doe</p>  <p>•</p>  <p>March 24, 2026</p></div>

Renders the three paragraphs inline with small vertical padding on the container.

  1. Inline tags/labels
html
<div class=“py-1 [&>p]:inline gap-2”>  <p class=“text-sm text-gray-600”>beta</p>  <p class=“text-sm text-blue-600”>new</p>  <p class=“text-sm”>v1.2</p></div>

Use spacing utilities (gap won’t affect inline children; use margin classes on p instead, e.g., mr-2) to separate inline paragraphs.

Alternatives

  • Use flex items-center on the container instead of forcing

    to inline if you need better alignment and spacing control.

  • Replace

    with if semantic requirements allow inline elements by default.

  • Use [&>p]:inline-block if you want inline flow but preserve width/height behaviors.

Quick tips

  • Test small-screen wrapping — inline paragraphs will wrap based on content and available width.
  • Combine with text and spacing utilities on the child

    elements for precise visual control.

  • carries paragraph semantics; prefer spans for purely inline UI tokens.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts