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

13 replies

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.

Uh oh!

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

Uh oh!

Usecase:

Proposed implementation:

Replies: 5 comments · 13 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 13 replies