moved the tailwind classes into css files

Author: mwagena

packages/tables/resources/css/actions.css

@@ -28,4 +28,8 @@
     &.md\:fi-align-end {
         @apply md:justify-end;
     }
+
+    &.fi-ta-actions-is-stacked {
+        @apply gap-4 px-3 sm:gap-3 sm:px-0;
+    }
 }

packages/tables/resources/css/cell.css

@@ -45,6 +45,22 @@
         }
     }
 
+    .fi-ta-cell-is-stacked-label {
+        @apply inline-block w-1/2 py-4 pl-4 text-xs font-semibold text-gray-500 sm:hidden;
+    }
+
+    .fi-ta-cell-is-stacked-contents {
+        @apply inline-block w-1/2 pr-4 text-sm wrap-break-word text-gray-800 sm:block sm:w-auto sm:pr-0;
+    }
+
+    &.fi-ta-cell-is-stacked-actions {
+        @apply flex w-full border-t border-gray-200 px-4 sm:table-cell sm:w-auto sm:border-none;
+    }
+
+    .fi-ta-cell-is-stacked-actions-label {
+        @apply inline-block w-1/2 text-xs font-semibold text-gray-500 sm:hidden;
+    }
+
     &.fi-vertical-align-start {
         @apply align-top;
     }

packages/tables/resources/css/header-cell.css

@@ -74,6 +74,10 @@
         }
     }
 
+    &.fi-ta-header-hidden-on-mobile {
+        @apply hidden sm:table-cell;
+    }
+
     &.sm\:fi-hidden {
         @apply sm:hidden;
     }

packages/tables/resources/css/table.css

@@ -1,6 +1,10 @@
 .fi-ta-table {
     @apply w-full table-auto divide-y divide-gray-200 text-start dark:divide-white/5;
 
+    &.fi-ta-table-stacked-on-mobile {
+        @apply table-fixed sm:table-auto;
+    }
+
     & > thead {
         @apply divide-y divide-gray-200 dark:divide-white/5;
 

packages/tables/resources/views/index.blade.php

@@ -1279,7 +1279,10 @@ class="fi-ta-record-collapse-btn fi-icon-btn"
                             </table>
                         @endif
                     @elseif ((! ($content || $hasColumnsLayout)) && ($records !== null))
-                        <table class="fi-ta-table w-full table-fixed sm:table-auto">
+                        <table @class([
+                            'fi-ta-table',
+                            'fi-ta-table-stacked-on-mobile' => $canBeStackedOnMobile
+                        ])>
                             <thead>
                                 @if ($hasColumnGroups)
                                     <tr class="fi-ta-table-head-groups-row">
@@ -1453,7 +1456,7 @@ class="fi-ta-actions-header-cell fi-ta-empty-header-cell"
                                                             'fi-grouped' => $column->getGroup(),
                                                             'fi-wrapped' => $column->canHeaderWrap(),
                                                             'fi-ta-header-cell-sorted' => $isColumnActivelySorted,
-                                                            'hidden sm:table-cell' => $canBeStackedOnMobile,
+                                                            'fi-ta-header-hidden-on-mobile' => $canBeStackedOnMobile,
                                                             ((($columnAlignment = $column->getAlignment()) instanceof \Filament\Support\Enums\Alignment) ? "fi-align-{$columnAlignment->value}" : (is_string($columnAlignment) ? $columnAlignment : '')),
                                                             (filled($columnHiddenFrom = $column->getHiddenFrom()) ? "{$columnHiddenFrom}:fi-hidden" : ''),
                                                             (filled($columnVisibleFrom = $column->getVisibleFrom()) ? "{$columnVisibleFrom}:fi-visible" : ''),
@@ -2020,8 +2023,8 @@ class="fi-ta-record-checkbox fi-checkbox-input"
                                                             }}
                                                         >
                                                             @if($canBeStackedOnMobile)
-                                                            <div class="inline-block w-1/2 sm:hidden text-xs font-semibold text-gray-500 py-4 pl-4">{{ $column->getLabel() }}</div>
-                                                            <div class="inline-block sm:block w-1/2 sm:w-auto wrap-break-word text-sm text-gray-800 pr-4 sm:pr-0">
+                                                            <div class="fi-ta-cell-is-stacked-label">{{ $column->getLabel() }}</div>
+                                                            <div class="fi-ta-cell-is-stacked-contents">
                                                             @endif
                                                             <{{ $columnWrapperTag }}
                                                                 @if ($columnWrapperTag === 'a')
@@ -2051,15 +2054,15 @@ class="fi-ta-record-checkbox fi-checkbox-input"
                                                     @if (count($defaultRecordActions) && $recordActionsPosition === RecordActionsPosition::AfterColumns && (! $isReordering))
                                                         <td @class([
                                                             'fi-ta-cell',
-                                                            'flex w-full border-t border-gray-200 sm:table-cell sm:w-auto sm:border-none px-4' => $canBeStackedOnMobile
+                                                            'fi-ta-cell-is-stacked-actions' => $canBeStackedOnMobile
                                                         ])>
                                                             @if($canBeStackedOnMobile)
-                                                            <div class="inline-block w-1/2 sm:hidden text-xs font-semibold text-gray-500">{{ __('Actions') }}</div>
+                                                            <div class="fi-ta-cell-is-stacked-actions-label">{{ __('Actions') }}</div>
                                                             @endif
                                                             <div
                                                                 @class([
                                                                     'fi-ta-actions',
-                                                                    'px-3 sm:px-0 gap-4 sm:gap-3' => $canBeStackedOnMobile,
+                                                                    'fi-ta-actions-is-stacked' => $canBeStackedOnMobile,
                                                                     match ($recordActionsAlignment) {
                                                                         Alignment::Center => 'fi-align-center',
                                                                         Alignment::Start, Alignment::Left => 'fi-align-start',