dataprismcore3.sbs

&

Written by

pw

in

py-1 [&>p]:inline — What it does and how to use it

This article explains the Tailwind CSS utility-like class syntax shown as py-1 [&>p]:inline, what each part means, when to use it, and examples you can drop into a project.

What it means

  • py-1 — applies padding on the Y axis (top and bottom) using Tailwind’s spacing scale (typically 0.25rem if using the default theme).
  • [&>p]:inline — a JIT/variant grouping using Tailwind’s arbitrary variant syntax where the selector inside the brackets is applied to the current element; & is the current element and >p selects direct child

    elements. The :inline part sets those child

    elements to display: inline.

Together, the class sets vertical padding on the element itself and forces its direct paragraph children to be inline elements.

When to use this

  • When you need compact inline paragraphs inside a padded container (e.g., inline labels, sentence fragments).
  • When you want to avoid adding extra markup or custom CSS for simple structural styling of direct children.

Examples

HTML:

First part,
  
second part,
  
third part.

Result: the container gets vertical padding; each direct

becomes inline so the text flows on one line (wrapping as needed) without default paragraph block spacing.

With other utilities:

  
Item A
  
Item B
  
Item C

Note: combining flex with inline children may be redundant—choose based on layout goals.

Caveats and tips

  • The arbitrary variant syntax requires Tailwind JIT/modern builds enabled.
  • The selector >p targets only direct children. Use a different selector (e.g., p) to target nested paragraphs.
  • Browsers treat inline elements differently (no vertical margins); convert to inline-block if you need width/height or vertical margins.
  • For more complex selectors or cross-browser concerns, consider a small CSS class instead.

Quick reference

  • py-1 → vertical padding
  • [&>p]:inline → make direct child

    elements display:inline

Use this pattern to keep styles co-located in markup and avoid extra CSS for small structural tweaks.

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

More posts