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
Member

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

@inopinatus
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 https://play.tailwindcss.com/BvQpg9QWEe
(this example uses adjacency, but it's just + instead of ~)

@adamwathan
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 ...">
    <!-- ... -->
  </span>
</div>

@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
@seb-jean
Copy link
Contributor

seb-jean commented Aug 17, 2021

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

@wolthers
Copy link

wolthers commented Jul 5, 2022

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

tailwind.config.js

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 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 &");
        });
      }
    }),
  ],
};

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>

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

Successfully merging this pull request may close these issues.

None yet

4 participants