csstailwind-css

How to use peer pseudo-class to detect existence of peers?

I'm trying to create a generic input component that rounds it's corners based on what's around it. Normally this works using the first: and last: pseudo-classes but there is one case where the label is a peer to the input so it should be fully rounded.

I think what I need to do is identify what the peer element is and then styling according. How can I use the custom peer selector to identify if a peer exists in TailwindCSS?

<div class="flex flex-col">
  <label hmtlFor="email" className="peer-[label]">Email</label>
  <input id="email" class="peer-label:only-of-type:rounded-3xl rounded-none bg-green-400" />
</div>

The playground shows what I'm fully trying to do, but for this question, just need to figure out how the custom peer syntax is supposed to work.

Solution

  • is this what you are looking for? https://play.tailwindcss.com/erZse7TDD4

    explanation:

    I am not sure peer would work here because:

    1. the span is not aways there
    2. the label is not a peer of the input it is a peer of the parent container of the input.
    3. I used a bunch of complex selectors which works but not sure it is the best solution here. I think you can do something similar via code when you render the items if you are using react.

    Edit: improved code and further selector explanation. One change I would make is wrapping everything with a div as the last 3 elements had and removing the rounded corners. that gives a generic html like below and we can focus only on the first and last child:

      <div class="flex flex-col">
    <!-- label -->
    <div>
      <!-- maybe a span here -->
      <!-- there is aways an input here -->
      <!-- maybe a span here -->
    </div>
  </div>

    now we can take advantage of something called arbitrary variant values.

    now we apply the below selectors directly to the wrapping div:

    "[&>*:first-child]:rounded-l-3xl"
// which is apply rounder left (rounded-l-3xl) to any (*) first child (:first-child) directly descendant (>) of myself (&).

    "[&>*:last-child]:rounded-r-3xl"
// which is apply rounder right (rounded-r-3xl) to any (*) last-child (:last-child) directly descendant (>) of myself (&).

    the resulting is: https://play.tailwindcss.com/K3vSiUxa4V

    EDIT2: without arbitrary values:

    similar effect without arbitrary variants: https://play.tailwindcss.com/Yup53pmaS4