Allow styling descendant of group that matches peer pseudo class variant #8777

wolthers · 2022-07-05T09:49:02Z

wolthers
Jul 5, 2022

Usecase:

When writing a custom checkbox or radio component it is often desirable to be able to style children of a group depending on the state of a sibling of the group.

Proposed implementation:

<div>
  <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
  </label>
</div>

Currently solvable with a plugin like this, but usecase is common enough that I think it makes sense to integrate.

// tailwind.config.js
module.exports = {
  ....
  plugins: [
    plugin(function groupPeer({ addVariant }) {
      let pseudoVariants = [
        // ... Any other pseudo variants you want to support. 
        // See https://github.com/tailwindlabs/tailwindcss/blob/6729524185b48c9e25af62fc2372911d66e7d1f0/src/corePlugins.js#L78
        "checked",
      ].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 &");
        });
      }
    }),
  ],
  ....
};

If I understand the source well enough, it should be relatively straight forward to add in the pseudoClass variants block here:

tailwindcss/src/corePlugins.js

Line 77 in 6729524

pseudoClassVariants: ({ addVariant, config }) => {

pofulu · 2022-09-19T08:03:13Z

pofulu
Sep 19, 2022

Thank you! It's really useful in many case, hope it become officially built-in api.

0 replies

maxdzin · 2022-09-19T09:06:35Z

maxdzin
Sep 19, 2022

Thanks, @wolthers
That's helped me too!
And I also hope that we can see it built-in officially.

0 replies

ZackPlauche · 2022-10-01T13:57:03Z

ZackPlauche
Oct 1, 2022

I hope they do add this, seriously.

Also, to get this to work with Nuxt 3, I had to write it without the plugin function:

// tailwind.config.js
module.exports = {
  ....
  plugins: [
    function groupPeer({ addVariant }) {
      let pseudoVariants = [
        // ... Any other pseudo variants you want to support. 
        // See https://github.com/tailwindlabs/tailwindcss/blob/6729524185b48c9e25af62fc2372911d66e7d1f0/src/corePlugins.js#L78
        "checked",
      ].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 &");
        });
      }
    },
  ],
  ...
};

0 replies

georgfaust · 2023-01-15T21:31:26Z

georgfaust
Jan 15, 2023

👍🏻

we need sth to implmenent this standard pattern

<style>
  .content { display: none; }
  #aaa:checked ~ #parent .aaa,
  #bbb:checked ~ #parent .bbb { background-color: green; }
  #aaa:checked ~ #children .aaa { display: block; }
  #bbb:checked ~ #children .bbb { display: block; }
</style>
<body>
  <input type="radio" id="aaa" name="content-filter" checked />
  <input type="radio" id="bbb" name="content-filter" />

  <div id="parent">
    <label for="aaa" class="aaa" id="aaa-label">AAA</label>
    <label for="bbb" class="bbb" id="bbb-label">BBB</label>
  </div>

  <div id="children">
    <div class="content aaa">aaa</div>
    <div class="content bbb">bbb</div>
  </div>
</body>

0 replies

MurmeltierS · 2023-05-07T21:28:30Z

MurmeltierS
May 7, 2023

If I'm not mistaken, you can achieve this by using peer-checked:group-[]:.

example:

<input type="checkbox" class="peer" />
<div class="text-blue-400 peer-checked:text-red-500 group">hello
  <div></div>
  <div class="peer-checked:group-[]:hidden">Icon</div>
</div>

https://play.tailwindcss.com/NT2vsY9Al5

Update:
In Tailwind 4.0+ you're able to use group-peer-. The above workaround won't work anymore.

<input type="checkbox" class="peer" />
<div class="text-blue-400 peer-checked:text-red-500 group">hello
  <div></div>
  <div class="group-peer-checked:hidden">Icon</div>
</div>

https://play.tailwindcss.com/dJE3pNQH8Z

12 replies

ChazUK Dec 25, 2023

Amazing!

i1ko Jan 11, 2024

Tnx!!!

But why my below variant doesn't work?

<input type="checkbox" class="peer" />
<div class="text-blue-400 peer-checked:text-red-500 peer-checked:is-checked group">hello
  <div></div>
  <div class="group-[.is-checked]:hidden">Icon</div>
</div>

MurmeltierS Jan 12, 2024

@i1ko Your tailwind class group-[.is-checked]:hidden translates to:
If the group element has the class .is-checked, then turn the Icon hidden.

So your icon would be (always) hidden if you would add the is-checked class to your group div.

-  <div class="text-blue-400 peer-checked:text-red-500 peer-checked:is-checked group">
+  <div class="text-blue-400 peer-checked:text-red-500 peer-checked:is-checked group is-checked">

This wouldn't make much sense though, as the icon would always be hidden - regardless of the checkbox.

yersskit Feb 11, 2024

you deserve some beers, it works!

gitchinoe Dec 28, 2024

In Tailwind 4.0 beta you'll simply need to replace peer-checked:group-[]:hidden with group-peer-hover:hidden for this to work again 😁

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow styling descendant of group that matches peer pseudo class variant #8777

{{title}}

Replies: 5 comments 12 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Allow styling descendant of group that matches peer pseudo class variant #8777

Usecase:

Proposed implementation:

Replies: 5 comments · 12 replies

Replies: 5 comments 12 replies