-
Notifications
You must be signed in to change notification settings - Fork 4k
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
Children selectors #1984
Comments
I think Also, in your example both |
I had
https://tailwindcss.com/docs/breakpoints/ Because <ul class="@hover:bg-red-500"></ul> You are however right about that |
If it bothers you, you could always use
This seems to only apply to breakpoints, as they are both relying on a media query. I would still prefer the prefix |
Text colour and size are inherited, why not just set them on the parent?
|
No plans to add this to core right now, instead I would recommend using this plugin: https://github.com/benface/tailwindcss-children Can revisit this some time in the future if there is an overwhelming demand for it 👍 |
Well that seems unfortunate. ul {
li {
@apply flex;
}
} |
You could use postcss-nested to nest selector similar to SCSS/SASS. |
@HenrijsS I use https://www.npmjs.com/package/postcss-nesting because then it uses the syntax that probably will be implemented as native CSS in the future. ul {
& li {
@apply flex;
}
} |
@adamwathan, in tailwind 2.2, you've introduced the Why not There are some reference #3922 and #277 about children selector with JIT mode. |
Not opposed to it just takes some set aside time to properly design the best version of that feature. The "peer" feature for example wasn't a 5 minute thing, and is miles different in terms of how it works and the power it affords than the way anyone had implemented that before in plugins or any of the Tailwind spin-off projects out there. Have a bunch of other higher priority work right now but definitely can think about it again when there's time. |
Cool @adamwathan 👍 Take a look at my use-case using CSS Grid under the answer's comment where it'll be helpful to me -> https://stackoverflow.com/a/68509649/6141587 |
For those that came here from nextjs by trying to style your |
Just to add an idea to this thread, I just wanted to add some classes to all anchors inside of a Might be a cool idea in the future to do something like: |
Tailwind needs a child selector. It would make life so much easier. |
@Arturexe here is a quick little plugin you can add if you need this behaviour: https://play.tailwindcss.com/h7eDGStsE9?file=config |
With TW 3.1, it's now also possible using |
Don't know how I missed this. Looks amazing! The problem is that it's not available through search, so I managed to miss it. |
|
To prevent repetition both in CSS and HTML we can use a component. However, when working with static lists it may not be a good idea to have every list item as a component.
A simplified example below:
For static lists like this you could split the data into an array and keep the classes as a variable. It's a bit more hassle and not always as readable.
Solution - Child selectors
Let's take the first example again:
>
last as class names needs to start with a letter.Cons
I can only come up with one con at the moment.
The text was updated successfully, but these errors were encountered: