Photo of DeepakNess DeepakNess

Ussing Tailwind CSS child selectors

Unproofread notes

When using Tailwind CSS, the both below code snippets for an HTML table show the same thing... but the second one looks cleaner here. It's called using Child Selectors in Tailwind CSS as being discussed in this thread on X.

<table>
  <tr>
    <td className="px-3 py-2">CSS</td>
    <td className="px-3 py-2">Great</td>
  </tr>
  <tr>
    <td className="px-3 py-2">Tailwind</td>
    <td className="px-3 py-2">Fine</td>
  </tr>
</table>
<table className="[&_td]:px-3 [&_td]:py-2">
  <tr>
    <td>CSS</td>
    <td>Great</td>
  </tr>
  <tr>
    <td>Tailwind</td>
    <td>Fine</td>
  </tr>
</table>

And I liked the Child Selectors approach because I don't have to repeat the same classes again and again. However, some people do not like this at all and you'll find that in the X thread I linked above as well.

Comment via email