selected/active variant for modifying child styles

[Kalyse]

Hi,
I'm not sure on a way to handle this. Imagine you have a simple table and in each row is a checkbox.
When I select the checkbox, I add the class selected on the wrapping to be selected. So somethign like this (pseudo):

<tr class="selected">
    <td><checkbox checked></td>
    <td><Box></td>
</tr>

What I would like, is to styled the child inner <Box> differently if the parent tr has a selected using tailwind variants.

I thought that something generic might already exist within the group classes (because this pattern to me seems very similar to group-hover etc). What I'm looking for is basically...

Parent element has a group active class...
Then any child with      group-active:bg-blue-50 will be red (if the parent is active)

The plan then is so that I can make this happen:

[Kalyse]

Okay, sorted it.

I created my own variant plugin like so:

plugin(function({ addVariant, e }) {
  addVariant('selected', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.${e(`active${separator}${className}`)}.selected`;
    });
  });
  addVariant('group-selected', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      return `.group.selected .${e(`group-selected${separator}${className}`)}`;
    });
  });
})

Using this, if the I can then modify inside variants.

[brumm]

Hah, that's alright. Thanks for replying!

[brumm]

Hey posterity, here ya go: https://play.tailwindcss.com/5JVWAedDHE

plugin

plugin(({ addVariant, e }) => {
  addVariant('selected', ({ modifySelectors, separator }) => {
    modifySelectors(({ className }) => {
      const escapedSelector = e(`selected${separator}${className}`)
      return ` .selected.${escapedSelector}, .selected .${escapedSelector}`
    })
  })
})

usage

<ul class="space-y-3 p-2">
  <li class="bg-gray-200 rounded p-2">
    <div>Title</div>
    <div class="text-gray-400 text-sm">Subtitle</div>
  </li>

  <li class="selected bg-gray-200 rounded p-2 selected:bg-blue-400 selected:text-white">
    <div>Title</div>
    <div class="text-gray-400 text-sm selected:text-white">Subtitle</div>
  </li>

  <li class="bg-gray-200 rounded p-2">
    <div>Title</div>
    <div class="text-gray-400 text-sm">Subtitle</div>
  </li>
</ul>

[brumm]

and a little codesandbox playground where you can see what tailwind generates for you: https://codesandbox.io/s/hardcore-bogdan-4k3f9?file=/src/index.js

[Eric78o]

The first cell contains an input element with the attribute "checked", which suggests that it is a checkbox that has been pre-selected.

The second cell contains an element with the tag "Box", which is not a standard HTML element. It is possible that this is a custom element defined in the document's CSS or JavaScript.Official website Without more context, it's difficult to determine the exact purpose of this code.

[Patricio879]

thank you for sharing this information..
NCEDCloud login

[ramirezm86]

Tracked down your post intriguing to peruse. I cannot hold back to see your post soon. Best of Luck for the impending update. This article is actually quite fascinating and successful.

MyCCPay

[Serenit8]

In this blog post we just showed some of the many ways to optimize and secure your Docker images by carefully crafting your Dockerfile. If you’d like to go further you can take a look at.

ACAeronet Login

[rayliao]

For v3*:

plugin(({ addVariant }) => {
  addVariant("selected", [".selected &", ".selected&"]);
}),

[Amyconnell]

Every variant is enabled out of the box. Variants like focus-visible, active, disabled, and others are not normally enabled by default due to file-size considerations. Since this library generates styles on demand, you can use any variant you want, whenever you want. You can even stack them like sm:hover:active:disabled:opacity-75. Never configure your variants again.
https://www.prepaidgiftbalance.vip

[Jakeduncan00]

The :active pseudo-class is commonly used on and elements. Other common targets of this pseudo-class include elements that are contained in an activated element, and form elements that are being activated through their associated .

Styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. To style links appropriately, put the :active rule after all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active. Krowd Darden

[Phillips235]

Every variant is enabled out of the box. Variants like focus-visible, active, disabled, and others are not normally enabled by default due to file-size considerations. Since this library generates styles on demand, you can use any variant you want, whenever you want. You can even stack them like sm:hover:active:disabled:opacity-75. Never configure your variants again.
and more for use of variant....
thanks!
Tellthebell

[Fuller43]

Thanks for sharing your expertise! Liteblue Login It's always enlightening to hear different viewpoints.