Extracting table styles to classes with @apply? Looking for best practice and/or "the Tailwind way".

[nonlocalize]

How would everyone handle this? Pretend aa is our brand identifier and we do not want to convert the table into components. Our app is very table-heavy and the goal is to make them easy to develop, so we want to extract table element styles.

Option 1

Pros/cons: Cleaner markup, but the need to refer to stylesheets and parent selectors to know what's styled:

<table class="aa-table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr>
      <td class="text">Name</td>
      <td class="numeric">1</td>
    </tr>
  </tbody>
</table>

CSS:

.aa-table row { @apply ... }
.aa-table td.text { @apply ... }
.aa-table td.numeric { @apply ... }

Option 2:

Pros/cons: Explicit and clear class names, but verbose and redundant.

<table class="aa-table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="aa-table-row">
      <td class="aa-table-data -text">Name</td>
      <td class="aa-table-data -numeric">1</td>
    </tr>
  </tbody>
</table>

CSS:

.aa-table-row { @apply ... }
.aa-table-data {
  @apply ...
  
  &.-text { @apply ... }
  &.-numeric { @apply ... }
}

Option 3:

Open to ideas!

[Russel476]

Anyone got a thought?
MyAARPMedicare