dataprismcore5.cfd

Speed

Written by

pw

in

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

This title refers to a Tailwind CSS utility pattern combining a spacing utility and a CSS selector using Tailwind’s arbitrary variants syntax. Below is a concise explanation and practical examples.

What it means

  • py-1: a Tailwind utility that applies vertical padding (padding-top and padding-bottom) of 0.25rem (4px) when using the default Tailwind scale.
  • [&>p]:inline: an arbitrary variant that targets direct child

    elements of the element the class is applied to and sets their display to inline. The [&>p] part is Tailwind’s JIT “arbitrary selector” syntax; the colon separates the selector from the utility being applied (inline).

Combined, the class string applies vertical padding to the element itself and makes its direct paragraph children render inline.

When to use

  • When you want a container to have small vertical padding while ensuring immediate

    children sit inline (useful for inline paragraph flows, compact UI elements, or custom list items).

  • When you want to avoid writing custom CSS and prefer Tailwind’s utility-first approach.

Examples

  1. Simple HTML
html
<div class=“py-1 [&>p]:inline”><p>Part one,</p>  <p> part two,</p>  <span> and a span.</span></div>

Result: the div gets 0.25rem vertical padding; both direct

elements display inline so text flows without block breaks.

  1. With responsive or hover variants
html
<div class=“py-1 md:py-2 [&>p]:inline hover:[&>p]:underline”>  <p>Clickable</p>  <p> label</p></div>

Result: larger vertical padding on medium screens; direct

children underline on hover.

  1. Nesting caution
  • [&>p]:inline targets only direct children. For nested

    elements use a descendant selector like [&p]:inline or adjust markup.

Browser support and build notes

    &]:pl-6” data-streamdown=“unordered-list”>

  • This relies on Tailwind JIT/utility features (arbitrary variants). Ensure Tailwind v2.2+ (JIT) or v3+.
  • Arbitrary selectors generate CSS; extremely complex selectors may be sanitized by Tailwind—keep selectors simple.
  • Output depends on your Tailwind config (spacing scale) and any safelist/purge settings.

Quick tips

  • Use [&>p]:inline when you control markup and need minimal CSS.
  • Prefer semantic HTML; if you need inline text, consider using inside

    rather than forcing

    inline.

  • Test responsive behavior and line-height after changing display to inline

If you want, I can provide variations for different spacing scales, responsive combinations, or a snippet that converts block

to inline only on small screens.

Comments

Leave a Reply

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

More posts