dataprismcore4.sbs

These

Written by

pw

in

Article: py-1 [&>p]:inline

What it means

This is a utility-first CSS class pattern commonly seen with Tailwind CSS (or Tailwind-like) where:

  • py-1 sets vertical padding (padding-top and padding-bottom) to a small value (typically 0.25rem).
  • [&>p]:inline is a variant using the arbitrary selector feature: it applies the inline display to any direct child

    elements.

When to use it

Use this combined class on a container when you want small vertical spacing but need direct paragraph children to flow inline instead of as block elements — for example, compact inline lists of paragraph tags, or formatting multiple short paragraphs on a single line.

Example (HTML)

html
<div class=“py-1 [&>p]:inline”><p>First short paragraph.</p>  <p>Second short paragraph.</p>  <p>Third short paragraph.</p></div>

Rendered result:

  • The container gets small top and bottom padding.
  • Each direct

    inside is displayed inline, so the three paragraphs appear on the same line (wrapping as needed).

Notes and caveats

  • The [&>p]:inline selector targets only direct children; nested paragraphs deeper than one level won’t be affected.
  • Ensure your build tooling supports Tailwind’s arbitrary variants and the needed JIT mode to interpret this syntax.

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

More posts