Skip to content

Commit 81646c9

Browse files
daniel-cintradaniel-cintra
committed
Tailwind 4 update
1 parent fcf7e7e commit 81646c9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+447
-469
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
[![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/)
99
[![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/)
1010
[![Laravel v11.x](https://img.shields.io/badge/Laravel-v11.x-FF2D20?style=for-the-badge&logo=laravel)](https://laravel.com)
11-
[![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/)
11+
[![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/)
1212
[![Tests passing](https://img.shields.io/badge/Tests-passing-green?style=for-the-badge&logo=github)](https://github.com/daniel-cintra/modular/actions)
1313

1414
</center>
@@ -46,7 +46,7 @@ Modular stands on the shoulders of giants, integrating powerful frameworks and t
4646
- [Vue 3](https://vuejs.org/) (Drives custom frontend components)
4747
- [Inertia.js](https://inertiajs.com/) (Bridges the gap between frontend and backend)
4848
- [Laravel 11](https://laravel.com/) (Empowers the backend)
49-
- [Tailwind CSS 3](https://tailwindcss.com/) (Styles with ease)
49+
- [Tailwind CSS 4](https://tailwindcss.com/) (Styles with ease)
5050
- [Vite](https://vitejs.dev/) (Accelerates frontend tooling)
5151

5252
When you bring Modular into your Laravel application, here’s a taste of what you'll unlock:

‎src/Console/InstallerTraits/FrontendPackages.php

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,19 @@ protected function installFrontendPackages(): void
1919
'@inertiajs/vue3' => '^2.0.0',
2020

2121
'@tailwindcss/forms' => '^0.5.6',
22+
'@tailwindcss/postcss' => '^4.0.0',
23+
'@tailwindcss/vite' => '^4.0.0',
2224
'@vitejs/plugin-vue' => '^5.0.4',
2325

24-
'autoprefixer' => '^10.4.18',
2526
'eslint' => '^v9.5.0',
2627
'eslint-config-prettier' => '^9.1.0',
27-
'eslint-plugin-vue' => '^v9.23.0',
28+
'eslint-plugin-vue' => '^v9.32.0',
2829

2930
'postcss' => '^8.4.35',
3031
'postcss-import' => '^16.0.1',
31-
'prettier' => '^3.2.5',
32+
'prettier' => '^3.4.2',
3233
'prettier-plugin-blade' => '^2.1.18',
33-
'prettier-plugin-tailwindcss' => '^v0.6.5',
34+
'prettier-plugin-tailwindcss' => '^v0.6.11',
3435

3536
'@tiptap/vue-3' => '^2.2.4',
3637
'@tiptap/starter-kit' => '^2.2.4',
@@ -44,18 +45,19 @@ protected function installFrontendPackages(): void
4445
'@tiptap/extension-table-cell' => '^2.2.4',
4546

4647
'remixicon' => '^4.2.0',
47-
'tailwindcss' => '^3.3.7',
48-
'unplugin-vue-components' => '^0.28.0',
48+
'tailwindcss' => '^4.0.0',
49+
'unplugin-vue-components' => '^v28.0.0',
4950
'vue' => '^3.4.21',
5051

5152
] + $packages);
5253

5354
$this->removesDefaultBootstrapFile();
5455
$this->removeDefaultTailwindConfig();
56+
$this->removeDefaultPostcssConfig();
5557

5658
// Config files...
57-
copy(__DIR__.'/../../../stubs/stack-configs/postcss.config.cjs', base_path('postcss.config.cjs'));
58-
copy(__DIR__.'/../../../stubs/stack-configs/tailwind.config.cjs', base_path('tailwind.config.cjs'));
59+
copy(__DIR__.'/../../../stubs/stack-configs/postcss.config.mjs', base_path('postcss.config.mjs'));
60+
copy(__DIR__.'/../../../stubs/stack-configs/tailwind.config.mjs', base_path('tailwind.config.mjs'));
5961
copy(__DIR__.'/../../../stubs/stack-configs/jsconfig.json', base_path('jsconfig.json'));
6062
copy(__DIR__.'/../../../stubs/stack-configs/vite.config.js', base_path('vite.config.js'));
6163
copy(__DIR__.'/../../../stubs/stack-configs/eslint.config.js', base_path('eslint.config.js'));
@@ -141,4 +143,20 @@ protected function removeDefaultTailwindConfig(): void
141143
$this->components->error('Preparing frontend: unable to remove default tailwind.config.js. Please check file permissions.');
142144
}
143145
}
146+
147+
protected function removeDefaultPostcssConfig(): void
148+
{
149+
$postcssConfigPath = base_path('postcss.config.js');
150+
151+
if (! file_exists($postcssConfigPath)) {
152+
return;
153+
}
154+
155+
try {
156+
unlink($postcssConfigPath);
157+
$this->components->info('Preparing frontend: default postcss.config.js file removed.');
158+
} catch (\Exception $e) {
159+
$this->components->error('Preparing frontend: unable to remove default postcss.config.js. Please check file permissions.');
160+
}
161+
}
144162
}

‎stubs/resources/css/app.css

Lines changed: 157 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,196 @@
1-
@import 'tailwindcss/base';
2-
@import 'tailwindcss/components';
3-
@import 'tailwindcss/utilities';
1+
@import 'tailwindcss';
42

53
@layer base {
4+
*,
5+
::after,
6+
::before,
7+
::backdrop,
8+
::file-selector-button {
9+
border-color: var(--color-gray-200, currentColor);
10+
}
11+
612
:root {
7-
--color-primary-1: 253 253 254; /* #fdfdfe */
8-
--color-primary-2: 248 250 255; /* #f8faff */
9-
--color-primary-3: 240 244 255; /* #f0f4ff */
10-
--color-primary-4: 230 237 254; /* #e6edfe */
11-
--color-primary-5: 217 226 252; /* #d9e2fc */
12-
--color-primary-6: 198 212 249; /* #c6d4f9 */
13-
--color-primary-7: 174 192 245; /* #aec0f5 */
14-
--color-primary-8: 141 164 239; /* #8da4ef */
15-
--color-primary-9: 62 99 221; /* #3e63dd */
16-
--color-primary-10: 58 92 204; /* #3a5ccc */
17-
--color-primary-11: 52 81 178; /* #3451b2 */
18-
--color-primary-12: 31 45 92; /* #1f2d5c */
13+
--color-primary-1: oklch(99.43% 0.0013 286.38); /* #fdfdfe */
14+
--color-primary-2: oklch(
15+
98.5% 0.006973967373672813 268.54888172949575
16+
); /* #f8faff */
17+
--color-primary-3: oklch(96.73% 0.0153 269.99); /* #f0f4ff */
18+
--color-primary-4: oklch(94.59% 0.0241 267.93); /* #e6edfe */
19+
--color-primary-5: oklch(91.4% 0.0368 270.46); /* #d9e2fc */
20+
--color-primary-6: oklch(87.13% 0.0536 268.92); /* #c6d4f9 */
21+
--color-primary-7: oklch(81.27% 0.0777 270.03); /* #aec0f5 */
22+
--color-primary-8: oklch(73.09% 0.1123 270.43); /* #8da4ef */
23+
--color-primary-9: oklch(54.38% 0.191 267.01); /* #3e63dd */
24+
--color-primary-10: oklch(51.51% 0.178 267.1); /* #3a5ccc */
25+
--color-primary-11: oklch(46.99% 0.158 267.41); /* #3451b2 */
26+
--color-primary-12: oklch(31.26% 0.0858 268.6); /* #1f2d5c */
1927

2028
/* 1 - App background, 2 - Subtle background */
21-
--color-neutral-1: 252 252 253; /* #fcfcfd */
22-
--color-neutral-2: 249 249 251; /* #f9f9fb */
29+
--color-neutral-1: oklch(99.13% 0.0013 286.38); /* #fcfcfd */
30+
--color-neutral-2: oklch(98.27% 0.0026 286.35); /* #f9f9fb */
2331

2432
/* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
25-
--color-neutral-3: 242 242 245; /* #f2f2f5 */
26-
--color-neutral-4: 235 235 239; /* #ebebef */
27-
--color-neutral-5: 228 228 233; /* #e4e4e9 */
33+
--color-neutral-3: oklch(96.2% 0.004 286.32); /* #f2f2f5 */
34+
--color-neutral-4: oklch(94.12% 0.0053 286.3); /* #ebebef */
35+
--color-neutral-5: oklch(92.03% 0.0067 286.27); /* #e4e4e9 */
2836

2937
/* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
30-
--color-neutral-6: 221 221 227; /* #dddde3 */
31-
--color-neutral-7: 211 212 219; /* #d3d4db */
32-
--color-neutral-8: 185 187 198; /* #b9bbc6 */
38+
--color-neutral-6: oklch(89.93% 0.0081 286.24); /* #dddde3 */
39+
--color-neutral-7: oklch(87.12% 0.0096 279.67); /* #d3d4db */
40+
--color-neutral-8: oklch(79.38% 0.0156 277.79); /* #b9bbc6 */
3341

3442
/* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
35-
--color-neutral-9: 139 141 152; /* #8b8d98 */
36-
--color-neutral-10: 126 128 138; /* #7e808a */
43+
--color-neutral-9: oklch(64.53% 0.0165 277.7); /* #8b8d98 */
44+
--color-neutral-10: oklch(60.15% 0.0153 276.9); /* #7e808a */
3745

3846
/* 11 - Low-contrast text, 12 - High-contrast text */
39-
--color-neutral-11: 96 100 108; /* #60646c */
40-
--color-neutral-12: 28 32 36; /* #1c2024 */
47+
--color-neutral-11: oklch(50.25% 0.0136 264.44); /* #60646c */
48+
--color-neutral-12: oklch(24.11% 0.0097 248.23); /* #1c2024 */
4149

4250
/* Semantic Colors */
43-
--color-info: 0 144 255; /* #0090ff 9*/
44-
--color-info-dark: 5 136 240; /* #0588f0 10*/
45-
--color-info-light: 230 244 254; /* #e6f4fe 3*/
46-
47-
--color-success: 48 164 108; /* #30a46c 9*/
48-
--color-success-dark: 43 154 102; /* #2b9a66 10*/
49-
--color-success-light: 230 246 235; /* #e6f6eb 3*/
50-
51-
--color-warning: 158 108 0; /* #9e6c00 11*/
52-
--color-warning-dark: 71 59 31; /* #473b1f 12*/
53-
--color-warning-light: 255 250 184; /* #fffab8 3*/
54-
55-
--color-error: 229 72 77; /* #e5484d 9*/
56-
--color-error-dark: 220 62 66; /* #dc3e42 10*/
57-
--color-error-light: 254 235 236; /* #feebec 3*/
51+
--color-info: oklch(64.93% 0.1929 251.78); /* #0090ff 9*/
52+
--color-info-dark: oklch(62.23% 0.1831 251.7); /* #0588f0 10*/
53+
--color-info-light: oklch(95.97% 0.0201 238.66); /* #e6f4fe 3*/
54+
55+
--color-success: oklch(64.06% 0.1329 157.68); /* #30a46c 9*/
56+
--color-success-dark: oklch(61.15% 0.1266 158.23); /* #2b9a66 10*/
57+
--color-success-light: oklch(95.82% 0.0223 155.92); /* #e6f6eb 3*/
58+
59+
--color-warning: oklch(
60+
56.91% 0.11915678603564026 76.80992661960202
61+
); /* #9e6c00 11*/
62+
--color-warning-dark: oklch(35.78% 0.0461 86.88); /* #473b1f 12*/
63+
--color-warning-light: oklch(97.35% 0.0838 104.2); /* #fffab8 3*/
64+
65+
--color-error: oklch(62.56% 0.1933 23.03); /* #e5484d 9*/
66+
--color-error-dark: oklch(59.9% 0.1947 24.04); /* #dc3e42 10*/
67+
--color-error-light: oklch(95.55% 0.0207 13.86); /* #feebec 3*/
5868
}
5969

6070
.dark-theme {
61-
--color-indigo-1: 17 19 31; /* #11131f */
62-
--color-indigo-2: 20 23 38; /* #141726 */
63-
--color-indigo-3: 24 36 73; /* #182449 */
64-
--color-indigo-4: 29 46 98; /* #1d2e62 */
65-
--color-indigo-5: 37 57 116; /* #253974 */
66-
--color-indigo-6: 48 67 132; /* #304384 */
67-
--color-indigo-7: 58 79 151; /* #3a4f97 */
68-
--color-indigo-8: 67 93 177; /* #435db1 */
69-
--color-indigo-9: 62 99 221; /* #3e63dd */
70-
--color-indigo-10: 84 114 228; /* #5472e4 */
71-
--color-indigo-11: 158 177 255; /* #9eb1ff */
72-
--color-indigo-12: 214 225 255; /* #d6e1ff */
71+
--color-indigo-1: oklch(19.09% 0.0246 276.53); /* #11131f */
72+
--color-indigo-2: oklch(20.94% 0.0302 274.84); /* #141726 */
73+
--color-indigo-3: oklch(27.16% 0.0705 267.98); /* #182449 */
74+
--color-indigo-4: oklch(31.85% 0.0946 267.25); /* #1d2e62 */
75+
--color-indigo-5: oklch(36.25% 0.1044 267.03); /* #253974 */
76+
--color-indigo-6: oklch(40.33% 0.1112 268.76); /* #304384 */
77+
--color-indigo-7: oklch(44.91% 0.1201 268.94); /* #3a4f97 */
78+
--color-indigo-8: oklch(50.21% 0.1366 268.25); /* #435db1 */
79+
--color-indigo-9: oklch(54.38% 0.191 267.01); /* #3e63dd */
80+
--color-indigo-10: oklch(58.91% 0.1758 269.3); /* #5472e4 */
81+
--color-indigo-11: oklch(
82+
77.59% 0.11379602554211403 273.01910299548774
83+
); /* #9eb1ff */
84+
--color-indigo-12: oklch(91.08% 0.0427 269.55); /* #d6e1ff */
7385

7486
/* 1 - App background, 2 - Subtle background */
75-
--color-neutral-1: 17 17 19; /* #111113 */
76-
--color-neutral-2: 24 25 27; /* #18191b */
87+
--color-neutral-1: oklch(17.85% 0.0041 285.98); /* #111113 */
88+
--color-neutral-2: oklch(21.32% 0.0042 264.48); /* #18191b */
7789

7890
/* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
79-
--color-neutral-3: 33 34 37; /* #212225 */
80-
--color-neutral-4: 39 42 45; /* #272a2d */
81-
--color-neutral-5: 46 49 53; /* #2e3135 */
91+
--color-neutral-3: oklch(25.21% 0.0058 271.18); /* #212225 */
92+
--color-neutral-4: oklch(28.32% 0.007 248.07); /* #272a2d */
93+
--color-neutral-5: oklch(31.18% 0.0083 255.56); /* #2e3135 */
8294

8395
/* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
84-
--color-neutral-6: 54 58 63; /* #363a3f */
85-
--color-neutral-7: 67 72 78; /* #43484e */
86-
--color-neutral-8: 90 97 105; /* #5a6169 */
96+
--color-neutral-6: oklch(34.66% 0.0103 253.97); /* #363a3f */
97+
--color-neutral-7: oklch(39.93% 0.0121 252.94); /* #43484e */
98+
--color-neutral-8: oklch(48.93% 0.0155 251.69); /* #5a6169 */
8799

88100
/* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
89-
--color-neutral-9: 105 110 119; /* #696e77 */
90-
--color-neutral-10: 119 123 132; /* #777b84 */
101+
--color-neutral-9: oklch(53.7% 0.0153 262.34); /* #696e77 */
102+
--color-neutral-10: oklch(58.25% 0.0145 266.63); /* #777b84 */
91103

92104
/* 11 - Low-contrast text, 12 - High-contrast text */
93-
--color-neutral-11: 176 180 186; /* #b0b4ba */
94-
--color-neutral-12: 237 238 240; /* #edeef0 */
105+
--color-neutral-11: oklch(76.86% 0.0096 258.34); /* #b0b4ba */
106+
--color-neutral-12: oklch(94.89% 0.0029 264.54); /* #edeef0 */
95107

96108
/* Semantic Colors */
97-
--color-info: 0 144 255; /* #0090ff 9*/
98-
--color-info-dark: 59 158 255; /* #3b9eff 10*/
99-
--color-info-light: 13 40 71; /* #0d2847 3*/
100-
101-
--color-success: 48 164 108; /* #30a46c 9*/
102-
--color-success-dark: 51 176 116; /* #33b074 10*/
103-
--color-success-light: 19 45 33; /* #132d21 3*/
104-
105-
--color-warning: 255 230 41; /* #ffe629 9*/
106-
--color-warning-dark: 255 255 87; /* #ffff57 10*/
107-
--color-warning-light: 45 35 5; /* #2d2305 3*/
108-
109-
--color-error: 229 72 77; /* #e5484d 9*/
110-
--color-error-dark: 236 93 94; /* #ec5d5e 10*/
111-
--color-error-light: 59 18 25; /* #3b1219 3*/
109+
--color-info: oklch(64.93% 0.1929 251.78); /* #0090ff 9*/
110+
--color-info-dark: oklch(68.84% 0.1693 251.4); /* #3b9eff 10*/
111+
--color-info-light: oklch(27.45% 0.0663 253.93); /* #0d2847 3*/
112+
113+
--color-success: oklch(64.06% 0.1329 157.68); /* #30a46c 9*/
114+
--color-success-dark: oklch(67.46% 0.1406 157.7); /* #33b074 10*/
115+
--color-success-light: oklch(27.21% 0.0396 162.17); /* #132d21 3*/
116+
117+
--color-warning: oklch(91.76% 0.1837 100.94); /* #ffe629 9*/
118+
--color-warning-dark: oklch(
119+
97.11% 0.18192669459778463 109.35780023059678
120+
); /* #ffff57 10*/
121+
--color-warning-light: oklch(26.09% 0.0472 90.26); /* #2d2305 3*/
122+
123+
--color-error: oklch(62.56% 0.1933 23.03); /* #e5484d 9*/
124+
--color-error-dark: oklch(66.34% 0.1774 22.85); /* #ec5d5e 10*/
125+
--color-error-light: oklch(25.1% 0.0649 12.69); /* #3b1219 3*/
112126
}
113127

114128
html {
115-
@apply bg-skin-neutral-1 text-skin-neutral-12;
129+
@apply bg-neutral-1 text-neutral-12;
116130
}
117131
}
118132

119-
@layer components {
120-
.input-error {
121-
@apply !ring-skin-error;
122-
}
133+
@utility input-error {
134+
@apply ring-error!;
135+
}
136+
137+
@theme {
138+
--color-primary-1: var(--color-primary-1);
139+
--color-primary-2: var(--color-primary-2);
140+
--color-primary-3: var(--color-primary-3);
141+
--color-primary-4: var(--color-primary-4);
142+
--color-primary-5: var(--color-primary-5);
143+
--color-primary-6: var(--color-primary-6);
144+
--color-primary-7: var(--color-primary-7);
145+
--color-primary-8: var(--color-primary-8);
146+
--color-primary-9: var(--color-primary-9);
147+
--color-primary-10: var(--color-primary-10);
148+
--color-primary-11: var(--color-primary-11);
149+
--color-primary-12: var(--color-primary-12);
150+
151+
/* 1 - App background, 2 - Subtle background */
152+
--color-neutral-1: var(--color-neutral-1);
153+
--color-neutral-2: var(--color-neutral-2);
154+
155+
/* 3 - UI element background, 4 - Hovered UI element background, 5 - Active / Selected UI element background */
156+
--color-neutral-3: var(--color-neutral-3);
157+
--color-neutral-4: var(--color-neutral-4);
158+
--color-neutral-5: var(--color-neutral-5);
159+
160+
/* 6 - Subtle borders and separators, 7 - UI element border and focus rings, 8 - Hovered UI element border */
161+
--color-neutral-6: var(--color-neutral-6);
162+
--color-neutral-7: var(--color-neutral-7);
163+
--color-neutral-8: var(--color-neutral-8);
164+
165+
/* 9 - Solid backgrounds, 10 - Hovered solid backgrounds */
166+
--color-neutral-9: var(--color-neutral-9);
167+
--color-neutral-10: var(--color-neutral-10);
168+
169+
/* 11 - Low-contrast text, 12 - High-contrast text */
170+
--color-neutral-11: var(--color-neutral-11);
171+
--color-neutral-12: var(--color-neutral-12);
172+
173+
/* Semantic Colors */
174+
--color-info: var(--color-info);
175+
--color-info-dark: var(--color-info-dark);
176+
--color-info-light: var(--color-info-light);
177+
178+
--color-success: var(--color-success);
179+
--color-success-dark: var(--color-success-dark);
180+
--color-success-light: var(--color-success-light);
181+
182+
--color-warning: var(--color-warning);
183+
--color-warning-dark: var(--color-warning-dark);
184+
--color-warning-light: var(--color-warning-light);
185+
186+
--color-error: var(--color-error);
187+
--color-error-dark: var(--color-error-dark);
188+
--color-error-light: var(--color-error-light);
189+
190+
/* Font Family */
191+
--font-sans: Nunito, ui-sans-serif, system-ui, sans-serif,
192+
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
193+
'Noto Color Emoji';
123194
}
124195

125196
#nprogress .bar {

‎stubs/resources/js/Components/DataTable/AppDataSearch.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="rounded-tl rounded-tr bg-skin-neutral-3 pb-4 pl-3 pt-3">
2+
<div class="bg-neutral-3 rounded-tl rounded-tr pt-3 pb-4 pl-3">
33
<label for="search" class="sr-only">Search</label>
44
<div class="flex items-center pr-4 align-middle">
55
<div class="pointer-events-none absolute flex items-center pl-3">
@@ -15,7 +15,7 @@
1515

1616
<AppButton
1717
v-if="searchTerm"
18-
class="btn ml-2 border border-skin-neutral-8 bg-skin-neutral-5 hover:bg-skin-neutral-8"
18+
class="btn border-neutral-8 bg-neutral-5 hover:bg-neutral-8 ml-2 border"
1919
@click="clearSearch"
2020
>
2121
<i class="ri-close-line"></i>

‎stubs/resources/js/Components/DataTable/AppDataTableData.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<td
3-
class="whitespace-nowrap border border-skin-neutral-6 px-2 py-1.5 font-medium"
3+
class="border-neutral-6 border px-2 py-1.5 font-medium whitespace-nowrap"
44
>
55
<slot></slot>
66
</td>

0 commit comments

Comments
 (0)