Tailwind v4

app/Providers/Filament/AdminPanelProvider.php

@@ -20,7 +20,6 @@
 use Illuminate\Session\Middleware\StartSession;
 use Illuminate\View\Middleware\ShareErrorsFromSession;
 use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
-use Stephenjude\FilamentDebugger\DebuggerPlugin;
 
 class AdminPanelProvider extends PanelProvider
 {

package.json

@@ -5,13 +5,14 @@
     "@sentry/vue": "^8.54.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "laravel-vite-plugin": "^1.2.0",
     "postcss": "^8.5.1",
     "postcss-import": "^16.1.0",
     "postcss-nested": "^7.0.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "vite": "^6.1.0",
     "vue": "^3.5.13"
   },

resources/css/app.css

@@ -1,11 +1,42 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "@css/typography.css";
-@import "@css/forms.css";
-@import "@css/buttons.css";
-@import "@css/content.css";
+@source "../../resources/js/";
+@source "../../resources/views/";
+
+@import "tailwindcss";
+
+@import "./typography.css";
+@import "./forms.css";
+@import "./buttons.css";
+@import "./content.css";
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@theme {
+    --font-*: initial;
+    --font-text: "Arial", sans-serif;
+    --font-heading: "Arial", sans-serif;
+
+    --breakpoint-xs: 321px;
+    --breakpoint-sm: 451px;
+    --breakpoint-md: 671px;
+    --breakpoint-lg: 769px;
+    --breakpoint-xl: 1025px;
+    --breakpoint-2xl: 1281px;
+    --breakpoint-3xl: 1441px;
+    --breakpoint-4xl: 1901px;
+
+    --color-brand-50: #f3f6fb;
+    --color-brand-100: #e5e9f4;
+    --color-brand-200: #d0d9ed;
+    --color-brand-300: #b0c0e0;
+    --color-brand-400: #8a9fd0;
+    --color-brand-500: #6a7fc1;
+    --color-brand-600: #5b6bb5;
+    --color-brand-700: #505aa5;
+    --color-brand-800: #464c87;
+    --color-brand-900: #3c416c;
+    --color-brand-950: #282a43;
+}
 
 #app {
     @apply h-full;

resources/css/buttons.css

@@ -1,13 +1,11 @@
-@layer components {
-    .button {
-        @apply rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-sm hover:bg-brand-600 transition-all ease-in-out duration-200;
-    }
-
-    .button-full {
-        @apply w-full text-center justify-center;
-    }
+@utility button {
+    @apply cursor-pointer rounded-md bg-brand-800 px-6 py-3 text-sm font-semibold text-white inline-flex shadow-xs hover:bg-brand-600 transition-all ease-in-out duration-200;
 
-    .button[disabled] {
+    &[disabled] {
         @apply pointer-events-none opacity-50;
     }
 }
+
+@utility button-full {
+    @apply w-full text-center justify-center;
+}

resources/css/content.css

@@ -1,89 +1,87 @@
-@layer components {
-    .content {
-        @apply prose text-neutral-700;
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            @apply font-heading font-bold  text-neutral-900;
-        }
+@utility content {
+    @apply prose text-neutral-700;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply font-heading font-bold  text-neutral-900;
+    }
 
-        h1 {
-            @apply text-4xl md:text-5xl;
-        }
+    h1 {
+        @apply text-4xl md:text-5xl;
+    }
 
-        h2 {
-            @apply text-3xl;
-        }
+    h2 {
+        @apply text-3xl;
+    }
 
-        h3 {
-            @apply text-2xl;
-        }
+    h3 {
+        @apply text-2xl;
+    }
 
-        h4 {
-            @apply text-xl;
-        }
+    h4 {
+        @apply text-xl;
+    }
 
-        h5 {
-            @apply text-lg;
-        }
+    h5 {
+        @apply text-lg;
+    }
 
-        h6 {
-            @apply text-base;
-        }
+    h6 {
+        @apply text-base;
+    }
 
-        li {
-            @apply ml-8;
-        }
+    li {
+        @apply ml-8;
+    }
 
-        a {
-            @apply hover:underline;
-        }
+    a {
+        @apply hover:underline;
+    }
 
-        ul li {
-            @apply list-disc;
-        }
+    ul li {
+        @apply list-disc;
+    }
 
-        ol li {
-            @apply list-decimal;
-        }
+    ol li {
+        @apply list-decimal;
+    }
 
-        strong {
-            @apply font-bold;
-        }
+    strong {
+        @apply font-bold;
+    }
 
-        blockquote {
-            @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
-        }
+    blockquote {
+        @apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
+    }
 
-        table {
-            @apply w-full text-sm text-left;
-        }
+    table {
+        @apply w-full text-sm text-left;
+    }
 
-        th {
-            @apply p-4 font-bold bg-brand-200;
-        }
+    th {
+        @apply p-4 font-bold bg-brand-200;
+    }
 
-        td {
-            @apply p-4 font-medium;
-        }
+    td {
+        @apply p-4 font-medium;
+    }
 
-        tr:not(:last-child) td {
-            @apply border-b border-brand-200;
-        }
+    tr:not(:last-child) td {
+        @apply border-b border-brand-200;
+    }
 
-        * {
-            & + h1,
-            & + h2,
-            & + h3,
-            & + h4,
-            & + h5,
-            & + h6 {
-                @apply mt-8;
-            }
+    * {
+        & + h1,
+        & + h2,
+        & + h3,
+        & + h4,
+        & + h5,
+        & + h6 {
+            @apply mt-8;
         }
     }
 }

resources/css/forms.css

@@ -1,64 +1,63 @@
-@layer components {
-    .form-row {
-        @apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
-    }
+@utility form-row {
+    @apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
+}
 
-    .form-col {
-        @apply col-span-full;
-    }
+@utility form-col {
+    @apply col-span-full;
+}
 
-    .form-col-2 {
-        @apply col-span-2;
-    }
+@utility form-col-2 {
+    @apply col-span-2;
+}
 
-    label {
-        &[for] {
-            @apply cursor-pointer;
-        }
-    }
+@utility label {
+    @apply pb-3 block text-sm sm:text-base font-medium;
+}
 
-    .label {
-        @apply pb-3 block text-sm sm:text-base font-medium;
-    }
+@utility small-label {
+    @apply block text-sm font-medium;
+}
 
-    .small-label {
-        @apply block text-sm font-medium;
-    }
+@utility inline-label {
+    @apply flex items-center gap-x-2;
+}
 
-    .inline-label {
-        @apply flex items-center gap-x-2;
-    }
+@utility field {
+    @apply block rounded-md border-brand-300 shadow-xs hover:ring-3 hover:ring-brand-200/50 focus:border-brand-300 focus:ring-3 focus:ring-brand-200/50 focus:ring-offset-0 transition ease-in-out duration-200;
+}
 
-    .input,
-    .textarea,
-    .select,
-    .checkbox,
-    .radio {
-        @apply block rounded-md border-brand-300 shadow-sm hover:ring hover:ring-brand-200 hover:ring-opacity-50 focus:border-brand-300 focus:ring focus:ring-brand-200 focus:ring-opacity-50 focus:ring-offset-0 transition ease-in-out duration-200;
-    }
+@utility input {
+    @apply field block text-base w-full;
+}
 
-    .input,
-    .textarea,
-    .select {
-        @apply block text-base w-full;
-    }
+@utility textarea {
+    @apply field block text-base w-full;
+    @apply min-h-32;
+}
 
-    .textarea {
-        @apply min-h-32;
-    }
+@utility select {
+    @apply field block text-base w-full;
+    @apply cursor-pointer;
+}
 
-    .select,
-    .checkbox,
-    .radio {
-        @apply cursor-pointer;
-    }
+@utility option {
+    @apply field;
+    @apply cursor-pointer size-5 text-brand-800;
+}
 
-    .checkbox,
-    .radio {
-        @apply size-5 text-brand-800;
-    }
+@utility checkbox {
+    @apply option;
+}
 
-    .radio {
-        @apply rounded-full;
+@utility radio {
+    @apply option;
+    @apply rounded-full;
+}
+
+@layer components {
+    label {
+        &[for] {
+            @apply cursor-pointer;
+        }
     }
 }