Cluster and Layout class-less children

[Jamiewarb]

Some objects require children elements to work, such as the Cluster and the Layout. They both employ the negative margin trick, and therefore need an inner element, ending up with HTML like this:

<div class="o-cluster">
  <div>
    <a href="#">A link</a>
  </div>
</div>

It's often easy to forget why that extra div is there, or that it is necessary.

This can be remedied by having a class on that element instead:

<div class="o-cluster">
  <div class="o-cluster__inner">
    <a href="#">A link</a>
  </div>
</div>

This is more verbose, though I understand isn't to everyones tastes.

Proposal

I propose that we have a setting in the Tailwind config for objects like these that allow us to turn on this optional class.

This means, the cluster styles would go from being a children selector > *, to more specifically targeting this class > .o-cluster__inner.

Turning the setting on will enforce the use of the class. Turning it off will still allow you to add them if you want to, as the class simply won't do anything when added.