Skip to content

Commit c63bad0

Browse files
SebKaySebKay
authored
Tailwind v4 (#99)
* Update vite.config.js * Vite * Run auto upgrade * Use new opacity * Update app.css * Update app.css * Update buttons.css * Reformat * Update app.css * Update forms.css * Update AdminPanelProvider.php * Adjust mobile menu
1 parent f1692f1 commit c63bad0

File tree

13 files changed

+193
-225
lines changed

13 files changed

+193
-225
lines changed

‎app/Providers/Filament/AdminPanelProvider.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
use Illuminate\Session\Middleware\StartSession;
2121
use Illuminate\View\Middleware\ShareErrorsFromSession;
2222
use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
23-
use Stephenjude\FilamentDebugger\DebuggerPlugin;
2423

2524
class AdminPanelProvider extends PanelProvider
2625
{

‎bun.lockb‎

11.7 KB
Binary file not shown.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
"@sentry/vue": "^8.54.0",
66
"@tailwindcss/forms": "^0.5.10",
77
"@tailwindcss/typography": "^0.5.16",
8+
"@tailwindcss/vite": "^4.0.4",
89
"@vitejs/plugin-vue": "^5.2.1",
910
"autoprefixer": "^10.4.20",
1011
"laravel-vite-plugin": "^1.2.0",
1112
"postcss": "^8.5.1",
1213
"postcss-import": "^16.1.0",
1314
"postcss-nested": "^7.0.2",
14-
"tailwindcss": "^3.4.17",
15+
"tailwindcss": "^4.0.0",
1516
"vite": "^6.1.0",
1617
"vue": "^3.5.13"
1718
},

‎resources/css/app.css‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,42 @@
1-
@import "tailwindcss/base";
2-
@import "tailwindcss/components";
3-
@import "tailwindcss/utilities";
4-
5-
@import "@css/typography.css";
6-
@import "@css/forms.css";
7-
@import "@css/buttons.css";
8-
@import "@css/content.css";
1+
@source "../../resources/js/";
2+
@source "../../resources/views/";
3+
4+
@import "tailwindcss";
5+
6+
@import "./typography.css";
7+
@import "./forms.css";
8+
@import "./buttons.css";
9+
@import "./content.css";
10+
11+
@plugin '@tailwindcss/forms';
12+
@plugin '@tailwindcss/typography';
13+
14+
@theme {
15+
--font-*: initial;
16+
--font-text: "Arial", sans-serif;
17+
--font-heading: "Arial", sans-serif;
18+
19+
--breakpoint-xs: 321px;
20+
--breakpoint-sm: 451px;
21+
--breakpoint-md: 671px;
22+
--breakpoint-lg: 769px;
23+
--breakpoint-xl: 1025px;
24+
--breakpoint-2xl: 1281px;
25+
--breakpoint-3xl: 1441px;
26+
--breakpoint-4xl: 1901px;
27+
28+
--color-brand-50: #f3f6fb;
29+
--color-brand-100: #e5e9f4;
30+
--color-brand-200: #d0d9ed;
31+
--color-brand-300: #b0c0e0;
32+
--color-brand-400: #8a9fd0;
33+
--color-brand-500: #6a7fc1;
34+
--color-brand-600: #5b6bb5;
35+
--color-brand-700: #505aa5;
36+
--color-brand-800: #464c87;
37+
--color-brand-900: #3c416c;
38+
--color-brand-950: #282a43;
39+
}
940

1041
#app {
1142
@apply h-full;

‎resources/css/buttons.css‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
@layer components {
2-
.button {
3-
@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;
4-
}
5-
6-
.button-full {
7-
@apply w-full text-center justify-center;
8-
}
1+
@utility button {
2+
@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;
93

10-
.button[disabled] {
4+
&[disabled] {
115
@apply pointer-events-none opacity-50;
126
}
137
}
8+
9+
@utility button-full {
10+
@apply w-full text-center justify-center;
11+
}

‎resources/css/content.css‎

Lines changed: 67 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,87 @@
1-
@layer components {
2-
.content {
3-
@apply prose text-neutral-700;
4-
5-
h1,
6-
h2,
7-
h3,
8-
h4,
9-
h5,
10-
h6 {
11-
@apply font-heading font-bold text-neutral-900;
12-
}
1+
@utility content {
2+
@apply prose text-neutral-700;
3+
4+
h1,
5+
h2,
6+
h3,
7+
h4,
8+
h5,
9+
h6 {
10+
@apply font-heading font-bold text-neutral-900;
11+
}
1312

14-
h1 {
15-
@apply text-4xl md:text-5xl;
16-
}
13+
h1 {
14+
@apply text-4xl md:text-5xl;
15+
}
1716

18-
h2 {
19-
@apply text-3xl;
20-
}
17+
h2 {
18+
@apply text-3xl;
19+
}
2120

22-
h3 {
23-
@apply text-2xl;
24-
}
21+
h3 {
22+
@apply text-2xl;
23+
}
2524

26-
h4 {
27-
@apply text-xl;
28-
}
25+
h4 {
26+
@apply text-xl;
27+
}
2928

30-
h5 {
31-
@apply text-lg;
32-
}
29+
h5 {
30+
@apply text-lg;
31+
}
3332

34-
h6 {
35-
@apply text-base;
36-
}
33+
h6 {
34+
@apply text-base;
35+
}
3736

38-
li {
39-
@apply ml-8;
40-
}
37+
li {
38+
@apply ml-8;
39+
}
4140

42-
a {
43-
@apply hover:underline;
44-
}
41+
a {
42+
@apply hover:underline;
43+
}
4544

46-
ul li {
47-
@apply list-disc;
48-
}
45+
ul li {
46+
@apply list-disc;
47+
}
4948

50-
ol li {
51-
@apply list-decimal;
52-
}
49+
ol li {
50+
@apply list-decimal;
51+
}
5352

54-
strong {
55-
@apply font-bold;
56-
}
53+
strong {
54+
@apply font-bold;
55+
}
5756

58-
blockquote {
59-
@apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
60-
}
57+
blockquote {
58+
@apply pl-4 py-3 my-4 border-s-4 border-gray-300 text-xl italic;
59+
}
6160

62-
table {
63-
@apply w-full text-sm text-left;
64-
}
61+
table {
62+
@apply w-full text-sm text-left;
63+
}
6564

66-
th {
67-
@apply p-4 font-bold bg-brand-200;
68-
}
65+
th {
66+
@apply p-4 font-bold bg-brand-200;
67+
}
6968

70-
td {
71-
@apply p-4 font-medium;
72-
}
69+
td {
70+
@apply p-4 font-medium;
71+
}
7372

74-
tr:not(:last-child) td {
75-
@apply border-b border-brand-200;
76-
}
73+
tr:not(:last-child) td {
74+
@apply border-b border-brand-200;
75+
}
7776

78-
* {
79-
& + h1,
80-
& + h2,
81-
& + h3,
82-
& + h4,
83-
& + h5,
84-
& + h6 {
85-
@apply mt-8;
86-
}
77+
* {
78+
& + h1,
79+
& + h2,
80+
& + h3,
81+
& + h4,
82+
& + h5,
83+
& + h6 {
84+
@apply mt-8;
8785
}
8886
}
8987
}

‎resources/css/forms.css‎

Lines changed: 49 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,63 @@
1-
@layer components {
2-
.form-row {
3-
@apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
4-
}
1+
@utility form-row {
2+
@apply grid grid-cols-1 gap-5 sm:gap-7 sm:grid-cols-4;
3+
}
54

6-
.form-col {
7-
@apply col-span-full;
8-
}
5+
@utility form-col {
6+
@apply col-span-full;
7+
}
98

10-
.form-col-2 {
11-
@apply col-span-2;
12-
}
9+
@utility form-col-2 {
10+
@apply col-span-2;
11+
}
1312

14-
label {
15-
&[for] {
16-
@apply cursor-pointer;
17-
}
18-
}
13+
@utility label {
14+
@apply pb-3 block text-sm sm:text-base font-medium;
15+
}
1916

20-
.label {
21-
@apply pb-3 block text-sm sm:text-base font-medium;
22-
}
17+
@utility small-label {
18+
@apply block text-sm font-medium;
19+
}
2320

24-
.small-label {
25-
@apply block text-sm font-medium;
26-
}
21+
@utility inline-label {
22+
@apply flex items-center gap-x-2;
23+
}
2724

28-
.inline-label {
29-
@apply flex items-center gap-x-2;
30-
}
25+
@utility field {
26+
@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;
27+
}
3128

32-
.input,
33-
.textarea,
34-
.select,
35-
.checkbox,
36-
.radio {
37-
@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;
38-
}
29+
@utility input {
30+
@apply field block text-base w-full;
31+
}
3932

40-
.input,
41-
.textarea,
42-
.select {
43-
@apply block text-base w-full;
44-
}
33+
@utility textarea {
34+
@apply field block text-base w-full;
35+
@apply min-h-32;
36+
}
4537

46-
.textarea {
47-
@apply min-h-32;
48-
}
38+
@utility select {
39+
@apply field block text-base w-full;
40+
@apply cursor-pointer;
41+
}
4942

50-
.select,
51-
.checkbox,
52-
.radio {
53-
@apply cursor-pointer;
54-
}
43+
@utility option {
44+
@apply field;
45+
@apply cursor-pointer size-5 text-brand-800;
46+
}
5547

56-
.checkbox,
57-
.radio {
58-
@apply size-5 text-brand-800;
59-
}
48+
@utility checkbox {
49+
@apply option;
50+
}
6051

61-
.radio {
62-
@apply rounded-full;
52+
@utility radio {
53+
@apply option;
54+
@apply rounded-full;
55+
}
56+
57+
@layer components {
58+
label {
59+
&[for] {
60+
@apply cursor-pointer;
61+
}
6362
}
6463
}

0 commit comments

Comments
 (0)