Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add peer-* variants #4556

Merged
merged 1 commit into from Jun 4, 2021
Merged

Add peer-* variants #4556

merged 1 commit into from Jun 4, 2021

Conversation

@adamwathan
Copy link
Contributor

@adamwathan adamwathan commented Jun 3, 2021

This PR adds new peer-* variants to the JIT engine that behave much like the group-* variants, but target sibling elements instead of parent elements.

This is useful for things like targeting siblings when a checkbox is checked, doing things like floating labels, etc.

<label>
  <input type="checkbox" class="peer sr-only">
  <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500">
  <!-- ... -->
</label>

This generates CSS like this:

.peer:checked ~ .peer-checked\:bg-blue-500 {
  background-color: blue;
}

So you can only do it based on previous siblings, which you are probably already used to because of how CSS works.

@adamwathan adamwathan force-pushed the add-peer-variant branch from 146e9ea to 1070df8 Jun 3, 2021
@inopinatus
Copy link

@inopinatus inopinatus commented Jun 4, 2021

Will a peer grouping work as well? Sometimes a child element needs to know that a parent was selected by a sibling combinator.

I have a couple of scrappy plugins I used for this already, see https://play.tailwindcss.com/BvQpg9QWEe
(this example uses adjacency, but it's just + instead of ~)

@adamwathan
Copy link
Contributor Author

@adamwathan adamwathan commented Jun 4, 2021

@inopinatus No easy way to do that with just this + the existing group API but it's something we could explore as an improvement down the road for sure, either by finding ways to make this stuff composable or just adding a dedicated new variant type, maybe something like:

<input class="peer" type="checkbox">
<div class="group">
  <span class="group-peer-checked:bg-blue-500 ...">
    <!-- ... -->
  </span>
</div>

@adamwathan adamwathan merged commit b9dd8b0 into master Jun 4, 2021
3 checks passed
3 checks passed
@github-actions
build (12)
Details
@github-actions
build (14)
Details
@github-actions
build (16)
Details
crswll added a commit to crswll/tailwindcss that referenced this pull request Jun 4, 2021
@seb-jean
Copy link

@seb-jean seb-jean commented Aug 17, 2021

I would be interested in having a new variant type group-peer-checked :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants