Tailwind 4 update

ModularThink · Jan 27, 2025 · 81646c9 · 81646c9
1 parent fcf7e7e
commit 81646c9
Show file tree

Hide file tree

Showing 52 changed files with 447 additions and 469 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 [![Vue v3.x](https://img.shields.io/badge/Vue.js-v3.x-2f4053?style=for-the-badge&logo=vue.js&logoColor=39af78)](https://vuejs.org/)
 [![Inertia.js v2.x](https://img.shields.io/badge/Inertia.js-v2.x-6765ea?style=for-the-badge&logo=inertia&logoColor=ffffff)](https://inertiajs.com/)
 [![Laravel v11.x](https://img.shields.io/badge/Laravel-v11.x-FF2D20?style=for-the-badge&logo=laravel)](https://laravel.com)
-[![Tailwind CSS v3.x](https://img.shields.io/badge/Tailwind%20CSS-v3.x-31b5f7?style=for-the-badge&logo=tailwind-css&logoColor=ffffff)](https://tailwindcss.com/)
+[![Tailwind CSS v4.x](https://img.shields.io/badge/Tailwind%20CSS-v4.x-31b5f7?style=for-the-badge&logo=tailwind-css&logoColor=ffffff)](https://tailwindcss.com/)
 [![Tests passing](https://img.shields.io/badge/Tests-passing-green?style=for-the-badge&logo=github)](https://github.com/daniel-cintra/modular/actions)
 
 </center>
@@ -46,7 +46,7 @@ Modular stands on the shoulders of giants, integrating powerful frameworks and t
 -   [Vue 3](https://vuejs.org/) (Drives custom frontend components)
 -   [Inertia.js](https://inertiajs.com/) (Bridges the gap between frontend and backend)
 -   [Laravel 11](https://laravel.com/) (Empowers the backend)
--   [Tailwind CSS 3](https://tailwindcss.com/) (Styles with ease)
+-   [Tailwind CSS 4](https://tailwindcss.com/) (Styles with ease)
 -   [Vite](https://vitejs.dev/) (Accelerates frontend tooling)
 
 When you bring Modular into your Laravel application, here’s a taste of what you'll unlock:

diff --git a/src/Console/InstallerTraits/FrontendPackages.php b/src/Console/InstallerTraits/FrontendPackages.php
@@ -19,18 +19,19 @@ protected function installFrontendPackages(): void
             '@inertiajs/vue3' => '^2.0.0',
 
             '@tailwindcss/forms' => '^0.5.6',
+            '@tailwindcss/postcss' => '^4.0.0',
+            '@tailwindcss/vite' => '^4.0.0',
             '@vitejs/plugin-vue' => '^5.0.4',
 
-            'autoprefixer' => '^10.4.18',
             'eslint' => '^v9.5.0',
             'eslint-config-prettier' => '^9.1.0',
-            'eslint-plugin-vue' => '^v9.23.0',
+            'eslint-plugin-vue' => '^v9.32.0',
 
             'postcss' => '^8.4.35',
             'postcss-import' => '^16.0.1',
-            'prettier' => '^3.2.5',
+            'prettier' => '^3.4.2',
             'prettier-plugin-blade' => '^2.1.18',
-            'prettier-plugin-tailwindcss' => '^v0.6.5',
+            'prettier-plugin-tailwindcss' => '^v0.6.11',
 
             '@tiptap/vue-3' => '^2.2.4',
             '@tiptap/starter-kit' => '^2.2.4',
@@ -44,18 +45,19 @@ protected function installFrontendPackages(): void
             '@tiptap/extension-table-cell' => '^2.2.4',
 
             'remixicon' => '^4.2.0',
-            'tailwindcss' => '^3.3.7',
-            'unplugin-vue-components' => '^0.28.0',
+            'tailwindcss' => '^4.0.0',
+            'unplugin-vue-components' => '^v28.0.0',
             'vue' => '^3.4.21',
 
         ] + $packages);
 
         $this->removesDefaultBootstrapFile();
         $this->removeDefaultTailwindConfig();
+        $this->removeDefaultPostcssConfig();
 
         // Config files...
-        copy(__DIR__.'/../../../stubs/stack-configs/postcss.config.cjs', base_path('postcss.config.cjs'));
-        copy(__DIR__.'/../../../stubs/stack-configs/tailwind.config.cjs', base_path('tailwind.config.cjs'));
+        copy(__DIR__.'/../../../stubs/stack-configs/postcss.config.mjs', base_path('postcss.config.mjs'));
+        copy(__DIR__.'/../../../stubs/stack-configs/tailwind.config.mjs', base_path('tailwind.config.mjs'));
         copy(__DIR__.'/../../../stubs/stack-configs/jsconfig.json', base_path('jsconfig.json'));
         copy(__DIR__.'/../../../stubs/stack-configs/vite.config.js', base_path('vite.config.js'));
         copy(__DIR__.'/../../../stubs/stack-configs/eslint.config.js', base_path('eslint.config.js'));
@@ -141,4 +143,20 @@ protected function removeDefaultTailwindConfig(): void
             $this->components->error('Preparing frontend: unable to remove default tailwind.config.js. Please check file permissions.');
         }
     }
+
+    protected function removeDefaultPostcssConfig(): void
+    {
+        $postcssConfigPath = base_path('postcss.config.js');
+
+        if (! file_exists($postcssConfigPath)) {
+            return;
+        }
+
+        try {
+            unlink($postcssConfigPath);
+            $this->components->info('Preparing frontend: default postcss.config.js file removed.');
+        } catch (\Exception $e) {
+            $this->components->error('Preparing frontend: unable to remove default postcss.config.js. Please check file permissions.');
+        }
+    }
 }
diff --git a/stubs/resources/css/app.css b/stubs/resources/css/app.css
@@ -1,125 +1,196 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
 
 @layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
+
     :root {
-        --color-primary-1: 253 253 254; /* #fdfdfe */
-        --color-primary-2: 248 250 255; /* #f8faff */
-        --color-primary-3: 240 244 255; /* #f0f4ff */
-        --color-primary-4: 230 237 254; /* #e6edfe */
-        --color-primary-5: 217 226 252; /* #d9e2fc */
-        --color-primary-6: 198 212 249; /* #c6d4f9 */
-        --color-primary-7: 174 192 245; /* #aec0f5 */
-        --color-primary-8: 141 164 239; /* #8da4ef */
-        --color-primary-9: 62 99 221; /* #3e63dd */
-        --color-primary-10: 58 92 204; /* #3a5ccc */
-        --color-primary-11: 52 81 178; /* #3451b2 */
-        --color-primary-12: 31 45 92; /* #1f2d5c */
+        --color-primary-1: oklch(99.43% 0.0013 286.38); /* #fdfdfe */
+        --color-primary-2: oklch(
+            98.5% 0.006973967373672813 268.54888172949575
+        ); /* #f8faff */
+        --color-primary-3: oklch(96.73% 0.0153 269.99); /* #f0f4ff */
+        --color-primary-4: oklch(94.59% 0.0241 267.93); /* #e6edfe */
+        --color-primary-5: oklch(91.4% 0.0368 270.46); /* #d9e2fc */
+        --color-primary-6: oklch(87.13% 0.0536 268.92); /* #c6d4f9 */
+        --color-primary-7: oklch(81.27% 0.0777 270.03); /* #aec0f5 */
+        --color-primary-8: oklch(73.09% 0.1123 270.43); /* #8da4ef */
+        --color-primary-9: oklch(54.38% 0.191 267.01); /* #3e63dd */
+        --color-primary-10: oklch(51.51% 0.178 267.1); /* #3a5ccc */
+        --color-primary-11: oklch(46.99% 0.158 267.41); /* #3451b2 */
+        --color-primary-12: oklch(31.26% 0.0858 268.6); /* #1f2d5c */
 
         /* 1 - App background, 2 - Subtle background */
-        --color-neutral-1: 252 252 253; /* #fcfcfd */
-        --color-neutral-2: 249 249 251; /* #f9f9fb */
+        --color-neutral-1: oklch(99.13% 0.0013 286.38); /* #fcfcfd */
+        --color-neutral-2: oklch(98.27% 0.0026 286.35); /* #f9f9fb */
 
         /* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
-        --color-neutral-3: 242 242 245; /* #f2f2f5 */
-        --color-neutral-4: 235 235 239; /* #ebebef */
-        --color-neutral-5: 228 228 233; /* #e4e4e9 */
+        --color-neutral-3: oklch(96.2% 0.004 286.32); /* #f2f2f5 */
+        --color-neutral-4: oklch(94.12% 0.0053 286.3); /* #ebebef */
+        --color-neutral-5: oklch(92.03% 0.0067 286.27); /* #e4e4e9 */
 
         /* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
-        --color-neutral-6: 221 221 227; /* #dddde3 */
-        --color-neutral-7: 211 212 219; /* #d3d4db */
-        --color-neutral-8: 185 187 198; /* #b9bbc6 */
+        --color-neutral-6: oklch(89.93% 0.0081 286.24); /* #dddde3 */
+        --color-neutral-7: oklch(87.12% 0.0096 279.67); /* #d3d4db */
+        --color-neutral-8: oklch(79.38% 0.0156 277.79); /* #b9bbc6 */
 
         /* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
-        --color-neutral-9: 139 141 152; /* #8b8d98 */
-        --color-neutral-10: 126 128 138; /* #7e808a */
+        --color-neutral-9: oklch(64.53% 0.0165 277.7); /* #8b8d98 */
+        --color-neutral-10: oklch(60.15% 0.0153 276.9); /* #7e808a */
 
         /* 11 - Low-contrast text, 12 - High-contrast text */
-        --color-neutral-11: 96 100 108; /* #60646c */
-        --color-neutral-12: 28 32 36; /* #1c2024 */
+        --color-neutral-11: oklch(50.25% 0.0136 264.44); /* #60646c */
+        --color-neutral-12: oklch(24.11% 0.0097 248.23); /* #1c2024 */
 
         /* Semantic Colors */
-        --color-info: 0 144 255; /* #0090ff 9*/
-        --color-info-dark: 5 136 240; /* #0588f0 10*/
-        --color-info-light: 230 244 254; /* #e6f4fe 3*/
-
-        --color-success: 48 164 108; /* #30a46c 9*/
-        --color-success-dark: 43 154 102; /* #2b9a66 10*/
-        --color-success-light: 230 246 235; /* #e6f6eb 3*/
-
-        --color-warning: 158 108 0; /* #9e6c00 11*/
-        --color-warning-dark: 71 59 31; /* #473b1f 12*/
-        --color-warning-light: 255 250 184; /* #fffab8 3*/
-
-        --color-error: 229 72 77; /* #e5484d 9*/
-        --color-error-dark: 220 62 66; /* #dc3e42 10*/
-        --color-error-light: 254 235 236; /* #feebec 3*/
+        --color-info: oklch(64.93% 0.1929 251.78); /* #0090ff 9*/
+        --color-info-dark: oklch(62.23% 0.1831 251.7); /* #0588f0 10*/
+        --color-info-light: oklch(95.97% 0.0201 238.66); /* #e6f4fe 3*/
+
+        --color-success: oklch(64.06% 0.1329 157.68); /* #30a46c 9*/
+        --color-success-dark: oklch(61.15% 0.1266 158.23); /* #2b9a66 10*/
+        --color-success-light: oklch(95.82% 0.0223 155.92); /* #e6f6eb 3*/
+
+        --color-warning: oklch(
+            56.91% 0.11915678603564026 76.80992661960202
+        ); /* #9e6c00 11*/
+        --color-warning-dark: oklch(35.78% 0.0461 86.88); /* #473b1f 12*/
+        --color-warning-light: oklch(97.35% 0.0838 104.2); /* #fffab8 3*/
+
+        --color-error: oklch(62.56% 0.1933 23.03); /* #e5484d 9*/
+        --color-error-dark: oklch(59.9% 0.1947 24.04); /* #dc3e42 10*/
+        --color-error-light: oklch(95.55% 0.0207 13.86); /* #feebec 3*/
     }
 
     .dark-theme {
-        --color-indigo-1: 17 19 31; /* #11131f */
-        --color-indigo-2: 20 23 38; /* #141726 */
-        --color-indigo-3: 24 36 73; /* #182449 */
-        --color-indigo-4: 29 46 98; /* #1d2e62 */
-        --color-indigo-5: 37 57 116; /* #253974 */
-        --color-indigo-6: 48 67 132; /* #304384 */
-        --color-indigo-7: 58 79 151; /* #3a4f97 */
-        --color-indigo-8: 67 93 177; /* #435db1 */
-        --color-indigo-9: 62 99 221; /* #3e63dd */
-        --color-indigo-10: 84 114 228; /* #5472e4 */
-        --color-indigo-11: 158 177 255; /* #9eb1ff */
-        --color-indigo-12: 214 225 255; /* #d6e1ff */
+        --color-indigo-1: oklch(19.09% 0.0246 276.53); /* #11131f */
+        --color-indigo-2: oklch(20.94% 0.0302 274.84); /* #141726 */
+        --color-indigo-3: oklch(27.16% 0.0705 267.98); /* #182449 */
+        --color-indigo-4: oklch(31.85% 0.0946 267.25); /* #1d2e62 */
+        --color-indigo-5: oklch(36.25% 0.1044 267.03); /* #253974 */
+        --color-indigo-6: oklch(40.33% 0.1112 268.76); /* #304384 */
+        --color-indigo-7: oklch(44.91% 0.1201 268.94); /* #3a4f97 */
+        --color-indigo-8: oklch(50.21% 0.1366 268.25); /* #435db1 */
+        --color-indigo-9: oklch(54.38% 0.191 267.01); /* #3e63dd */
+        --color-indigo-10: oklch(58.91% 0.1758 269.3); /* #5472e4 */
+        --color-indigo-11: oklch(
+            77.59% 0.11379602554211403 273.01910299548774
+        ); /* #9eb1ff */
+        --color-indigo-12: oklch(91.08% 0.0427 269.55); /* #d6e1ff */
 
         /* 1 - App background, 2 - Subtle background */
-        --color-neutral-1: 17 17 19; /* #111113 */
-        --color-neutral-2: 24 25 27; /* #18191b */
+        --color-neutral-1: oklch(17.85% 0.0041 285.98); /* #111113 */
+        --color-neutral-2: oklch(21.32% 0.0042 264.48); /* #18191b */
 
         /* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
-        --color-neutral-3: 33 34 37; /* #212225 */
-        --color-neutral-4: 39 42 45; /* #272a2d */
-        --color-neutral-5: 46 49 53; /* #2e3135 */
+        --color-neutral-3: oklch(25.21% 0.0058 271.18); /* #212225 */
+        --color-neutral-4: oklch(28.32% 0.007 248.07); /* #272a2d */
+        --color-neutral-5: oklch(31.18% 0.0083 255.56); /* #2e3135 */
 
         /* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
-        --color-neutral-6: 54 58 63; /* #363a3f */
-        --color-neutral-7: 67 72 78; /* #43484e */
-        --color-neutral-8: 90 97 105; /* #5a6169 */
+        --color-neutral-6: oklch(34.66% 0.0103 253.97); /* #363a3f */
+        --color-neutral-7: oklch(39.93% 0.0121 252.94); /* #43484e */
+        --color-neutral-8: oklch(48.93% 0.0155 251.69); /* #5a6169 */
 
         /* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
-        --color-neutral-9: 105 110 119; /* #696e77 */
-        --color-neutral-10: 119 123 132; /* #777b84 */
+        --color-neutral-9: oklch(53.7% 0.0153 262.34); /* #696e77 */
+        --color-neutral-10: oklch(58.25% 0.0145 266.63); /* #777b84 */
 
         /* 11 - Low-contrast text, 12 - High-contrast text */
-        --color-neutral-11: 176 180 186; /* #b0b4ba */
-        --color-neutral-12: 237 238 240; /* #edeef0 */
+        --color-neutral-11: oklch(76.86% 0.0096 258.34); /* #b0b4ba */
+        --color-neutral-12: oklch(94.89% 0.0029 264.54); /* #edeef0 */
 
         /* Semantic Colors */
-        --color-info: 0 144 255; /* #0090ff 9*/
-        --color-info-dark: 59 158 255; /* #3b9eff 10*/
-        --color-info-light: 13 40 71; /* #0d2847 3*/
-
-        --color-success: 48 164 108; /* #30a46c 9*/
-        --color-success-dark: 51 176 116; /* #33b074 10*/
-        --color-success-light: 19 45 33; /* #132d21 3*/
-
-        --color-warning: 255 230 41; /* #ffe629 9*/
-        --color-warning-dark: 255 255 87; /* #ffff57 10*/
-        --color-warning-light: 45 35 5; /* #2d2305 3*/
-
-        --color-error: 229 72 77; /* #e5484d 9*/
-        --color-error-dark: 236 93 94; /* #ec5d5e 10*/
-        --color-error-light: 59 18 25; /* #3b1219 3*/
+        --color-info: oklch(64.93% 0.1929 251.78); /* #0090ff 9*/
+        --color-info-dark: oklch(68.84% 0.1693 251.4); /* #3b9eff 10*/
+        --color-info-light: oklch(27.45% 0.0663 253.93); /* #0d2847 3*/
+
+        --color-success: oklch(64.06% 0.1329 157.68); /* #30a46c 9*/
+        --color-success-dark: oklch(67.46% 0.1406 157.7); /* #33b074 10*/
+        --color-success-light: oklch(27.21% 0.0396 162.17); /* #132d21 3*/
+
+        --color-warning: oklch(91.76% 0.1837 100.94); /* #ffe629 9*/
+        --color-warning-dark: oklch(
+            97.11% 0.18192669459778463 109.35780023059678
+        ); /* #ffff57 10*/
+        --color-warning-light: oklch(26.09% 0.0472 90.26); /* #2d2305 3*/
+
+        --color-error: oklch(62.56% 0.1933 23.03); /* #e5484d 9*/
+        --color-error-dark: oklch(66.34% 0.1774 22.85); /* #ec5d5e 10*/
+        --color-error-light: oklch(25.1% 0.0649 12.69); /* #3b1219 3*/
     }
 
     html {
-        @apply bg-skin-neutral-1 text-skin-neutral-12;
+        @apply bg-neutral-1 text-neutral-12;
     }
 }
 
-@layer components {
-    .input-error {
-        @apply !ring-skin-error;
-    }
+@utility input-error {
+    @apply ring-error!;
+}
+
+@theme {
+    --color-primary-1: var(--color-primary-1);
+    --color-primary-2: var(--color-primary-2);
+    --color-primary-3: var(--color-primary-3);
+    --color-primary-4: var(--color-primary-4);
+    --color-primary-5: var(--color-primary-5);
+    --color-primary-6: var(--color-primary-6);
+    --color-primary-7: var(--color-primary-7);
+    --color-primary-8: var(--color-primary-8);
+    --color-primary-9: var(--color-primary-9);
+    --color-primary-10: var(--color-primary-10);
+    --color-primary-11: var(--color-primary-11);
+    --color-primary-12: var(--color-primary-12);
+
+    /* 1 - App background, 2 - Subtle background */
+    --color-neutral-1: var(--color-neutral-1);
+    --color-neutral-2: var(--color-neutral-2);
+
+    /* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
+    --color-neutral-3: var(--color-neutral-3);
+    --color-neutral-4: var(--color-neutral-4);
+    --color-neutral-5: var(--color-neutral-5);
+
+    /* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
+    --color-neutral-6: var(--color-neutral-6);
+    --color-neutral-7: var(--color-neutral-7);
+    --color-neutral-8: var(--color-neutral-8);
+
+    /* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
+    --color-neutral-9: var(--color-neutral-9);
+    --color-neutral-10: var(--color-neutral-10);
+
+    /* 11 - Low-contrast text, 12 - High-contrast text */
+    --color-neutral-11: var(--color-neutral-11);
+    --color-neutral-12: var(--color-neutral-12);
+
+    /* Semantic Colors */
+    --color-info: var(--color-info);
+    --color-info-dark: var(--color-info-dark);
+    --color-info-light: var(--color-info-light);
+
+    --color-success: var(--color-success);
+    --color-success-dark: var(--color-success-dark);
+    --color-success-light: var(--color-success-light);
+
+    --color-warning: var(--color-warning);
+    --color-warning-dark: var(--color-warning-dark);
+    --color-warning-light: var(--color-warning-light);
+
+    --color-error: var(--color-error);
+    --color-error-dark: var(--color-error-dark);
+    --color-error-light: var(--color-error-light);
+
+    /* Font Family */
+    --font-sans: Nunito, ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
 }
 
 #nprogress .bar {

diff --git a/stubs/resources/js/Components/DataTable/AppDataSearch.vue b/stubs/resources/js/Components/DataTable/AppDataSearch.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="rounded-tl rounded-tr bg-skin-neutral-3 pb-4 pl-3 pt-3">
+    <div class="bg-neutral-3 rounded-tl rounded-tr pt-3 pb-4 pl-3">
         <label for="search" class="sr-only">Search</label>
         <div class="flex items-center pr-4 align-middle">
             <div class="pointer-events-none absolute flex items-center pl-3">
@@ -15,7 +15,7 @@
 
             <AppButton
                 v-if="searchTerm"
-                class="btn ml-2 border border-skin-neutral-8 bg-skin-neutral-5 hover:bg-skin-neutral-8"
+                class="btn border-neutral-8 bg-neutral-5 hover:bg-neutral-8 ml-2 border"
                 @click="clearSearch"
             >
                 <i class="ri-close-line"></i>

diff --git a/stubs/resources/js/Components/DataTable/AppDataTableData.vue b/stubs/resources/js/Components/DataTable/AppDataTableData.vue
@@ -1,6 +1,6 @@
 <template>
     <td
-        class="whitespace-nowrap border border-skin-neutral-6 px-2 py-1.5 font-medium"
+        class="border-neutral-6 border px-2 py-1.5 font-medium whitespace-nowrap"
     >
         <slot></slot>
     </td>