Parent state modifier without explicit parent (in-*) #13912
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add support for "in" that works like the group variant, but use any parent (so it does not require an explicit group element).
Merged
RobinMalfait
added a commit
that referenced
this pull request
Nov 18, 2024
This PR adds a new `in-*` variant that allows you to apply utilities
when you are in a certain selector.
While doing research for codemods, we notice that some people use
`group-[]:flex` (yep, the arbitrary value is empty…). The idea behind is
that people want to know if you are in a `.group` or not.
Similarly, some people use `group-[]/name:flex` to know when you are in
a `.group/name` class or not.
This new `in-*` variant allows you to do that without any hacks.
If you want to check whether you are inside of a `p` tag, then you can
write `in-[p]:flex`. If you want to check that you are inside of a
`.group`, you can write `in-[.group]`.
This variant is also a compound variant, which means that you can write
`in-data-visible:flex` which generates the following CSS:
```css
:where([data-visible]) .in-data-visible\:flex {
display: flex;
}
```
This variant also compounds with `not-*`, for example:
`not-in-[.group]:flex`.
Additionally, this PR also includes a codemod to convert `group-[]:flex`
to `in-[.group]:flex`.
---
This was proposed before for v3 in #13912
---------
Co-authored-by: Eloy Espinaco <eloyesp@gmail.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
|
Hey! Now that Tailwind CSS v4 is out, we won't be adding more features to v3. That said, we did implement this feature in v4 so I would highly recommend to upgrade to v4 if you can! We wrote an upgrade guide and included some tooling to upgrade your projects to minimize the amount of work you have to do yourself. More info: https://tailwindcss.com/docs/upgrade-guide Docs related to the Thanks again for this feature! |
|
Yes, I already saw it and I'm already using this! Thanks a lot! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I'm doing a follow up on #13751 where I propose a new modifier, that is a simplified "group-*" without an explicit parent.
There are many times when the styling is based on the parent state, but it is not important which parent, there are many examples of that on the tests with the form of:
[.checked &]:underline, but there are many other cases, for example:in-aria-busy: If any parent is busy is enough, we don't care which parent it is.in-data-active: This is part of an active element.The syntax is quite simple, the implementation is clean and the generated css is shorter than using
group-*or[.checked_&]:underline, and it also allows using variants like data- and aria-.Hope you like the idea.