Hi i'm trying to add tailwind classes to the first td that has the class admin-data but for some reason it's not working. When i removed the :first-child is working fine. Is this some issue with how the rendering works?
html component
<tbody>
<tr *ngFor="let observableItem of observableList" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="w-4 p-4">
<div class="flex items-center">
<input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
</div>
</td>
<ng-container *ngFor="let column of columns">
<td class="admin-data px-6 py-4">
{{ observableItem[column.key] }}
</td>
</ng-container>
...
and this is the css:
tr > td.admin-data:first-child {
@apply px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white;
}
When i remove first-child it works on all tds with class "admin-data" When i have first-child nothing happens and it doesn't render at all.