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 1 commit into from Jun 4, 2021

Add peer-* variants #4556

merged 1 commit into from Jun 4, 2021


Copy link

@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.

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

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.

Copy link

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
(this example uses adjacency, but it's just + instead of ~)

Copy link
Member Author

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 ...">
    <!-- ... -->

@adamwathan adamwathan merged commit b9dd8b0 into master Jun 4, 2021
3 checks passed
crswll pushed a commit to crswll/tailwindcss that referenced this pull request Jun 4, 2021
Copy link

seb-jean commented Aug 17, 2021

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

Copy link

wolthers commented Jul 5, 2022

@adamwathan @seb-jean: This can be solved with a custom plugin:


const plugin = require("tailwindcss/plugin");

 * @type {import('tailwindcss').Config}
module.exports = {
  plugins: [
    plugin(function groupPeer({ addVariant }) {
      let pseudoVariants = [
        //... Any other pseudo variants you want to support. See
      ].map((variant) =>
        Array.isArray(variant) ? variant : [variant, `&:${variant}`],

      for (let [variantName, state] of pseudoVariants) {
        addVariant(`group-peer-${variantName}`, (ctx) => {
          let result = typeof state === "function" ? state(ctx) : state;
          return result.replace(/&(\S+)/, ":merge(.peer)$1 ~ .group &");


  <input class="peer" type="radio" />
  <label class="group">
    <span class="group-peer-checked:hidden"></span>
    <span class="hidden group-peer-checked:block"></span>
    Some label

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

Successfully merging this pull request may close these issues.

None yet

4 participants