Replies: 8 comments 7 replies
-
|
Okay, sorted it. I created my own variant plugin like so:
Using this, if the I can then modify inside variants. |
Beta Was this translation helpful? Give feedback.
-
|
Hah, that's alright. Thanks for replying! |
Beta Was this translation helpful? Give feedback.
-
|
Hey posterity, here ya go: https://play.tailwindcss.com/5JVWAedDHE pluginplugin(({ 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> |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
thank you for sharing this information.. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
For v3*: |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing your expertise! Liteblue Login It's always enlightening to hear different viewpoints. |
Beta Was this translation helpful? Give feedback.
-
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
selectedon the wrapping to be selected. So somethign like this (pseudo):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...
The plan then is so that I can make this happen:
Beta Was this translation helpful? Give feedback.
All reactions