children selector as part of core tailwind, as JIT is 🔥

[audacioustux]

guess it's time to reconsider this, as there's no more CSS bloat issue to worry about.
#277
#1984

[richardtallent]

If this is reconsidered, I would suggest this form:

<div class="h1:font-bold li:text-grey-600 hover:li:text-grey-500">
    <h1>Hello</h1>
    <ul>
        <li>First</li>
        <li>Second</li>
    </ul>
</div>

I.e., the prefix is the HTML element name of the child rather than something more general (and longer) such as "children". We could perhaps still have another prefix for cases when the style should be applied to all descendants.

This could be a game-changer for using Tailwind with externally-rendered content (for example, HTML rendered from markdown or stored in database fields, where we don't have control over classes).

Potential caveat: child/descendant selectors have a higher selectivity, so they can't be overridden with Tailwind classes. So the best use case really would be only when the inner HTML isn't "tailwindable" for some reason.

[richardtallent]

Ugh. I just looked at the code above and realized that rules with selectors like these would leak all over the place. Clearly I need more coffee. Never mind!

[audacioustux]

maybe something like ch-:first:before:hidden ch-[li]:before:mx-2 ?

[jenstornell]

Let's say that content is generated from markdown. To style every possible element in there would be a hell of a bunch of classes. Just an h1 and a ul list could blow out when heavily styled.

[audacioustux]

ummm how? the possible types of elements generated from markdown i guess has a low enough upper-bound.. can't exactly visualize what you're saying.. or are you saying that adding class attribute in lots of li elements in a list is too much, and for ex. children:li:mx-4 on the parent ul element is a better option? @jenstornell

[jenstornell]

Let's say the markup is like below:

<div class="">
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h2</h3>
  <ul>
    <li>li</li>
  </ul>
  <img src="#">
  <a href="#"></a>
  <p>p</p>
  <table>
    <tr>
      <td>td</td>
    </tr>
  </table>
  <hr>
</div>

It would be a massive amout of classes. I don't have a better idea, but I wish I had. Now the best alternatives are:

1. The typography plugin
2. @apply