Add a sibling variant without duplication

[NoelJacob]

A keyword twin can be added that applies css to itself and then to other twins. It will be same as sibling but without duplication.

[SamGoody]

This is a great idea, but the more I think about it, the less I think we need sibling - in the event that you want to have different rules for the first element, you can add .not-twin, or override the rules.

What do you think?

I have updated the docs to state my intention of having twin-rules applied to itself and twins.

[SamGoody]

A couple of questions about aliases:

• Do we need both child and children? It seems to me that we should either add siblings, twins, heirs and descendants - or we should drop children. What do others think?
• Is heir a clear name? Is there a better name that is clear, but shorter than descendant(s)?
• Rules on twin are applied to itself, as NoelJacob suggested. (Thanks, Noel!). I cannot think why we should need a seperate sibling variant that does not have rules applied to self.

I had originally included sibling and descendant as I figured they would be more intuitive names. Am no longer sure, and am looking for feedback.

Any thoughts?

[SamGoody]

Rules on twin are now applied to itself as well.

[sherakama]

Upgrading from TW2 -> TW3 and having used the plugin https://github.com/benface/tailwindcss-children, having the children alias available is a nice upgrade path that leads to less refactoring.

[dannyuk1982]

Re: "you can add .not-twin" - my main (maybe sole) use case for child/children is in CMS generated text, so it's not easy at all to add in classes to child elements. Especially something like a Markdown field from Statamic, that just takes Markdown and converts to HTML so there is no way to add classes to the

tags generated.

[SamGoody]

not-twin (and not-heir, not-descendant, and not-sibling) should all be working. Please tell me if there is an issue with it.

BTW, you should also be able to use other variants in conjunction, so for example, even:twin:mb-5 should only be applied to every other element, and first:twin:mb-5 should only be applied to itself.

I haven't tested, but am working on the next update, and once I am sure all the other variants work, will add to the docs. That may help in your case. (where it may be a specificity issue).

[dannyuk1982]

I think I misunderstood not-twin, confusing it with a similar usage to not-child which I think is applied to the child itself? That's what I meant would be hard to do from CMS content.

[SamGoody]

I don't follow, but am always happy to get feedback.

<p class='twin:mb-5'>Margin</p>
<p>Margin</p>
<p class='not-twin'>No Margin</p>

What are you suggesting should be?

[dannyuk1982]

Yea for twin, like I said I'd confused the usage (skim reading the docs, sorry!)

The issue is for not-child, i.e.

<div class="child:mb-5">
  <p>This has margin</p>
  <p class="not-child">This doesn't have margin</p>
  <p>This has margin</p>
</div>

There is no way to apply that class to the middle p if using a CMS to generate the paragraphs. Not that can think of a workaround for that! Probably going off-topic too.

[SamGoody]

Am working on another plugin that provides nth-child, has, and a few other goodies.
Once ready, you should be able to to target specific siblings/children from the parent.

We may be able to port it into our planned css selectors as well - child-['nth-child(3)']:mb-0.

Dunno. Will see once we get the basic logic worked out. Not in the next week.

[dannyuk1982]

Did you see Adam tweated about doing the same? It's going to be in core by the sounds of it soon https://twitter.com/adamwathan/status/1523345746421985281

[SamGoody]

Good for you then, but then, of course, you won't need tailwind-children at all. :)

[dannyuk1982]

Well, the child: syntax is a lot nicer!

[khaki32]

I prefer children: over child:, because child: gave me the impression it would only affect one child. But it doesn't really matter.