Separates tailwind and bootstrap css

dist/mix-manifest.json

@@ -1,5 +1,7 @@
 {
-    "/powergrid.js": "/powergrid.js?id=50f814d7565817030b1b2ce4099bb763",
+    "/powergrid.js": "/powergrid.js?id=bbd782d1c384ded474df544e0d6118db",
+    "/bootstrap5.css": "/bootstrap5.css?id=602e7265599ee427d66342dea7d77bb1",
+    "/tailwind.css": "/tailwind.css?id=07d7ad4c93113b7693f8f9bd0a9a701d",
     "/tom-select.css": "/tom-select.css?id=7af730d2c4bf937316d4002948b1571d",
-    "/powergrid.css": "/powergrid.css?id=f2c32aef475db76375ad76fb2f0f7d33"
+    "/powergrid.css": "/powergrid.css?id=f6bd5092ec92b7fb6d3488dd0bb5602f"
 }

resources/css/base.css

@@ -0,0 +1,16 @@
+[x-cloak] {
+    display: none;
+}
+
+table {
+    width: 100%;
+}
+
+table thead {
+    padding-left: 15px;
+    text-transform: uppercase;
+    font-size: .75rem;
+    color: #6b6a6a;
+    padding-top: 8px;
+    padding-bottom: 8px
+}

resources/css/bootstrap.css

@@ -0,0 +1,103 @@
+@import "base.css";
+@import "editable.css";
+
+.table .checkbox-column {
+    width: 50px !important;
+    max-width: 50px !important;
+    text-align: center
+}
+
+.btn-light {
+    color: #000;
+    background-color: white;
+    border-color: #d7dbdf;
+    font-size: 0.85rem;
+}
+
+.form-control:disabled, .form-control[readonly] {
+    background-color: white !important;
+    opacity: 1;
+}
+
+.btn-light:hover {
+    color: #000;
+    background-color: white;
+    border-color: #d7dbdf;
+    font-size: 0.85rem;
+}
+
+.btn-light, .has-search .form-control {
+    padding-left: 10px !important;
+}
+
+.accordion-button {
+    padding: .7rem .7rem
+}
+
+.btn-light, .has-search .form-control {
+    padding-left: 2.375rem
+}
+
+.page-link {
+    color: gray !important
+}
+
+.page-item.active .page-link {
+    color: #fff !important;
+    background-color: gray;
+    border-color: gray
+}
+
+@-webkit-keyframes spinner {
+    0% {
+        -webkit-transform: rotate(0)
+    }
+    100% {
+        -webkit-transform: rotate(360deg)
+    }
+}
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0)
+    }
+    100% {
+        transform: rotate(360deg)
+    }
+}
+
+.badge {
+    font-size: 0.77em;
+}
+
+.form-control, .btn {
+    box-shadow: none!important;
+}
+
+.btn-group-vertical>.btn, .btn-group>.btn {
+    position: relative;
+    flex: 1 1 auto;
+    border-color: #ced4da !important;
+}
+
+.bs5-rotate-0 {
+    transition: all 0.3s ease;
+    transform: rotate(0deg);
+}
+
+.bs5-rotate-90 {
+    transition: all 0.3s ease;
+    transform: rotate(90deg);
+}
+
+.bs5-w-h-1_5em {
+    width: 1.5em;
+    height: 1.5em;
+}
+
+.pg-actions {
+    display: flex;
+    gap: 4px;
+    width: 100%;
+}
+

resources/css/editable.css

@@ -0,0 +1,21 @@
+[x-ref="editable"].pg-single-line {
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+[x-ref="editable"].pg-single-line br {
+    display:none;
+
+}
+
+[x-ref="editable"].pg-single-line * {
+    display:inline;
+    white-space:nowrap;
+}
+
+[x-ref="editable"][placeholder]:empty:before {
+    content: attr(placeholder);
+    position: absolute;
+    color: gray;
+    background-color: transparent;
+}

resources/css/style.css

@@ -162,3 +162,7 @@ table thead {
     width: 1.5em;
     height: 1.5em;
 }
+
+.pg-actions {
+    @apply flex gap-2 w-full
+}

resources/css/tailwind.css

@@ -0,0 +1,32 @@
+@import "base.css";
+@import "editable.css";
+
+.page-link {
+    @apply block bg-white text-pg-secondary-800 border-r border-gray-200 outline-none py-2 w-12 text-sm text-center
+}
+
+.page-link:last-child {
+    @apply border-0
+}
+
+.page-link:hover {
+    @apply bg-pg-secondary-700 text-white border-pg-secondary-700
+}
+
+.page-item.active .page-link {
+    @apply bg-pg-secondary-700 text-white border-pg-secondary-700
+}
+
+.page-item.disabled .page-link {
+    @apply bg-white text-gray-300 border-gray-200
+}
+
+.pg-btn-white {
+    @apply outline-none inline-flex justify-center items-center focus:ring-1 focus:ring-offset-1 bg-white
+    hover:shadow-sm disabled:opacity-80 disabled:cursor-not-allowed rounded-lg gap-x-2 text-sm px-3 py-2 border border-pg-primary-300
+    text-pg-primary-500 hover:bg-pg-primary-100 ring-pg-primary-200
+}
+
+.pg-actions {
+    @apply flex gap-2 w-full
+}

resources/views/components/row.blade.php

@@ -43,9 +43,8 @@
         style="{{ $column->hidden === true ? 'display:none' : '' }}; {{ $theme->table->tdBodyStyle . ' ' . $column->bodyStyle ?? '' }}"
         wire:key="row-{{ $column->field }}"
     >
-        <div class="flex gap-2 w-full">
+        <div class="pg-actions">
             <!-- Render Action -->
-
             @if (filled(data_get($row, 'actions')) && $column->isAction)
                 @foreach (data_get($row, 'actions') as $key => $action)
                     <div wire:key="action-{{ $row->id }}-{{ $key }}">

webpack.mix.js

@@ -3,6 +3,8 @@ const mix = require('laravel-mix')
 mix.js('resources/js/index.js', 'powergrid.js')
     .css('resources/css/style.css', 'powergrid.css')
     .css('resources/css/tom-select.css', 'tom-select.css')
+    .css('resources/css/tailwind.css', 'tailwind.css')
+    .css('resources/css/bootstrap.css', 'bootstrap5.css')
     .setPublicPath('dist')
 
 if (mix.inProduction()) {