dataprismcore3.cfd

and

Written by

pw

in

Explanation of `py-1 [&>p]:inline

  • Context: This is a Tailwind CSS utility combined with an arbitrary variant using the JIT/modern syntax. It applies styles to an element and to its direct child

    elements.

  • Breakdown:

    • py-1 — applies vertical padding (padding-top and padding-bottom) of 0.25rem (4px) using Tailwind’s spacing scale.
    • [&>p]:inline — an arbitrary variant that targets direct child

      elements and sets their display to inline. The & represents the current element; >p selects its direct

      children.

  • Equivalent raw CSS:

    css
    .your-element {padding-top: 0.25rem;  padding-bottom: 0.25rem;}.your-element > p {  display: inline;}
  • When to use: Useful when you want container vertical padding while forcing immediate paragraph children to flow inline (for example, to prevent default block spacing or to style inline text flows).

  • Notes:

    • Requires Tailwind JIT/arbitrary variant support (Tailwind v2.2+ with JIT or v3+).
    • [&:has(p) …] isn’t supported; use [& p]:… for any descendant.

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

More posts