Skip to content

Commit 6b53c5b

Browse files
mythzmythz
committed
Upgrade to tailwind v4
1 parent 7722208 commit 6b53c5b

File tree

7 files changed

+168
-132
lines changed

7 files changed

+168
-132
lines changed

‎MyApp.Client/.postcssrc.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"plugins": {
3+
"@tailwindcss/postcss": {}
4+
}
5+
}

‎MyApp.Client/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + React + TS</title>
88
</head>
9-
<body>
9+
<body class="text-foreground dark:text-foreground bg-background dark:bg-background">
1010
<div id="root"></div>
1111
<script type="module" src="/src/main.tsx"></script>
1212
</body>

‎MyApp.Client/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@
3333
"@iconify/react": "^5.2.1",
3434
"@mdx-js/rollup": "^3.1.0",
3535
"@tailwindcss/forms": "^0.5.10",
36+
"@tailwindcss/postcss": "^4.1.3",
3637
"@tailwindcss/typography": "^0.5.16",
38+
"@tailwindcss/vite": "^4.1.3",
3739
"@types/mdx": "^2.0.13",
3840
"@types/node": "^22.14.0",
3941
"@types/react": "^19.1.0",

‎MyApp.Client/postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎MyApp.Client/src/assets/styles/index.css‎

Lines changed: 149 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,221 @@
1-
@tailwind base;
1+
@import "tailwindcss";
22

3-
/* Write your own custom base styles here */
4-
[v-cloak] {display:none}
3+
@plugin "@tailwindcss/forms";
4+
@plugin "@tailwindcss/typography";
5+
@config "../../../tailwind.config.ts";
56

6-
@tailwind components;
7+
@custom-variant dark (&:where(.dark, .dark *));
78

8-
/* Write you own custom component styles here */
9-
10-
/* override element defaults */
11-
b, strong { font-weight:600; }
12-
13-
/*vue*/
14-
[v-cloak] {display:none}
15-
16-
/* @tailwindcss/aspect css */
17-
.aspect-h-9 {
18-
--tw-aspect-h: 9;
9+
@layer base {
10+
:root {
11+
--background: 0 0% 100%;
12+
--foreground: 222.2 84% 4.9%;
13+
--card: 0 0% 100%;
14+
--card-foreground: 222.2 84% 4.9%;
15+
--popover: 0 0% 100%;
16+
--popover-foreground: 222.2 84% 4.9%;
17+
--primary: 221.2 83.2% 53.3%;
18+
--primary-foreground: 210 40% 98%;
19+
--secondary: 210 40% 96.1%;
20+
--secondary-foreground: 222.2 47.4% 11.2%;
21+
--muted: 210 40% 96.1%;
22+
--muted-foreground: 215.4 16.3% 46.9%;
23+
--accent: 210 40% 96.1%;
24+
--accent-foreground: 222.2 47.4% 11.2%;
25+
--destructive: 0 84.2% 60.2%;
26+
--destructive-foreground: 210 40% 98%;
27+
--border: 214.3 31.8% 91.4%;
28+
--input: 214.3 31.8% 91.4%;
29+
--ring: 221.2 83.2% 53.3%;
30+
--radius: 0.5rem;
31+
}
32+
:root.dark {
33+
--background: 222.2 84% 4.9%;
34+
--foreground: 210 40% 98%;
35+
--card: 222.2 84% 4.9%;
36+
--card-foreground: 210 40% 98%;
37+
--popover: 222.2 84% 4.9%;
38+
--popover-foreground: 210 40% 98%;
39+
--primary: 210 40% 98%;
40+
--primary-foreground: 222.2 47.4% 11.2%;
41+
--secondary: 217.2 32.6% 17.5%;
42+
--secondary-foreground: 210 40% 98%;
43+
--muted: 217.2 32.6% 17.5%;
44+
--muted-foreground: 215 20.2% 65.1%;
45+
--accent: 217.2 32.6% 17.5%;
46+
--accent-foreground: 210 40% 98%;
47+
--destructive: 0 62.8% 30.6%;
48+
--destructive-foreground: 210 40% 98%;
49+
--border: 217.2 32.6% 17.5%;
50+
--input: 217.2 32.6% 17.5%;
51+
--ring: 212.7 26.8% 83.9%;
52+
}
53+
54+
*,
55+
::after,
56+
::before,
57+
::backdrop,
58+
::file-selector-button {
59+
border-color: hsl(var(--border));
60+
}
1961
}
20-
.aspect-w-16 {
21-
position: relative;
22-
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
23-
--tw-aspect-w: 16;
62+
63+
@theme {
64+
--default-ring-color: hsl(var(--ring));
2465
}
25-
.aspect-w-16 > * {
26-
position: absolute;
27-
height: 100%;
28-
width: 100%;
29-
top: 0;
30-
right: 0;
31-
bottom: 0;
32-
left: 0;
66+
67+
/* Write you own custom component styles here */
68+
b,
69+
strong {
70+
font-weight: 600;
3371
}
3472

3573
/*typography*/
36-
.prose pre::-webkit-scrollbar, .prose code::-webkit-scrollbar {
74+
.prose pre::-webkit-scrollbar,
75+
.prose code::-webkit-scrollbar {
3776
width: 8px;
3877
height: 8px;
3978
background: #2d3748;
4079
}
41-
.prose pre::-webkit-scrollbar-thumb, .prose code::-webkit-scrollbar-thumb {
80+
81+
.prose pre::-webkit-scrollbar-thumb,
82+
.prose code::-webkit-scrollbar-thumb {
4283
background-color: rgb(100 116 139);
4384
}
44-
code[class*=language-], pre[class*=language-] {
45-
background-color:#1f2937;
85+
86+
code[class*=language-],
87+
pre[class*=language-] {
88+
background-color: #1f2937;
4689
min-width: fit-content;
4790
}
48-
.dark .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *,pre code)) {
49-
background-color: #172554; /* blue-950 */
50-
color: #e5e7eb; /* gray-200 */
91+
92+
.dark .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *, pre code)) {
93+
background-color: #172554;
94+
/* blue-950 */
95+
color: #e5e7eb;
96+
/* gray-200 */
5197
}
5298

5399
/* dark mode autocomplete fields */
54100
.dark input:-webkit-autofill,
55101
.dark input:-webkit-autofill:focus {
56102
transition: background-color 600000s 0s, color 600000s 0s;
57103
}
104+
58105
.dark input[data-autocompleted] {
59106
background-color: transparent !important;
60107
}
61108

62109
/* dark mode forms fixes */
63-
.dark select, .dark textarea {
110+
.dark select,
111+
.dark textarea {
64112
background-color: #000;
65113
}
66114

67115

68116
/*markdown containers*/
69-
.copy p, .copy p code { color:#fff }
70-
.sh-copy { max-height: 34px; }
71-
.copied { display: none}
72-
.copying .copied { display: block }
73-
.copying .nocopy { display: none }
117+
.copy p,
118+
.copy p code {
119+
color: #fff
120+
}
74121

75-
.cp p, .cp p code { margin:0; padding:0 }
122+
.sh-copy {
123+
max-height: 34px;
124+
}
76125

77-
.sh-copy code { font-size: 16px }
78-
.sh-copy p, .sh-copy p code { color: rgb(243 244 246) }
79-
.sh-copy p::before { content:'$ '; color: rgb(156 163 175) }
80-
.sh-copy a { color: rgb(243 244 246) }
81-
.sh-copy a:hover { text-decoration: none }
126+
.copied {
127+
display: none
128+
}
129+
130+
.copying .copied {
131+
display: block
132+
}
133+
134+
.copying .nocopy {
135+
display: none
136+
}
137+
138+
.cp p,
139+
.cp p code {
140+
margin: 0;
141+
padding: 0
142+
}
143+
144+
.sh-copy code {
145+
font-size: 16px
146+
}
147+
148+
.sh-copy p,
149+
.sh-copy p code {
150+
color: rgb(243 244 246)
151+
}
152+
153+
.sh-copy p::before {
154+
content: '$ ';
155+
color: rgb(156 163 175)
156+
}
157+
158+
.sh-copy a {
159+
color: rgb(243 244 246)
160+
}
161+
162+
.sh-copy a:hover {
163+
text-decoration: none
164+
}
82165

83166
/* Custom Info Containers*/
84-
.custom-block.tip,.custom-block.info,.custom-block.warning,.custom-block.danger {
167+
.custom-block.tip,
168+
.custom-block.info,
169+
.custom-block.warning,
170+
.custom-block.danger {
85171
margin: 1rem 0;
86172
border-left: .5rem solid;
87173
padding: .1rem 1.5rem;
88174
overflow-x: auto;
89175
}
176+
90177
.custom-block.tip {
91178
background-color: #f3f5f7;
92179
border-color: #007bff
93180
}
181+
94182
.custom-block.info {
95183
background-color: #f3f5f7;
96184
border-color: #476582
97185
}
186+
98187
.custom-block.warning {
99188
border-color: #e7c000;
100189
color: #6b5900;
101190
background-color: #ffe5644d
102191
}
192+
103193
.custom-block.warning .custom-block-title {
104194
color: #b29400
105195
}
196+
106197
.custom-block.warning a {
107198
color: #2c3e50
108199
}
200+
109201
.custom-block.danger {
110202
border-color: #c00;
111203
color: #4d0000;
112204
background-color: #ffe6e6
113205
}
206+
114207
.custom-block.danger .custom-block-title {
115208
color: #900
116209
}
210+
117211
.custom-block.danger a {
118212
color: #2c3e50
119213
}
214+
120215
.dark .custom-block {
121216
background: #111827;
122217
}
218+
123219
.custom-block.details {
124220
position: relative;
125221
display: block;
@@ -128,76 +224,24 @@ code[class*=language-], pre[class*=language-] {
128224
padding: 1.6em;
129225
background-color: #eee
130226
}
227+
131228
.custom-block.details h4 {
132229
margin-top: 0
133230
}
134-
.custom-block.details figure:last-child,.custom-block.details p:last-child {
231+
232+
.custom-block.details figure:last-child,
233+
.custom-block.details p:last-child {
135234
margin-bottom: 0;
136235
padding-bottom: 0
137236
}
237+
138238
.custom-block.details summary {
139239
outline: none;
140240
cursor: pointer
141241
}
242+
142243
.custom-block-title {
143244
margin-bottom: -.4rem;
144245
font-weight: 600;
145246
text-transform: uppercase;
146247
}
147-
148-
@tailwind utilities;
149-
150-
@layer base {
151-
:root {
152-
--background: 0 0% 100%;
153-
--foreground: 222.2 84% 4.9%;
154-
--card: 0 0% 100%;
155-
--card-foreground: 222.2 84% 4.9%;
156-
--popover: 0 0% 100%;
157-
--popover-foreground: 222.2 84% 4.9%;
158-
--primary: 221.2 83.2% 53.3%;
159-
--primary-foreground: 210 40% 98%;
160-
--secondary: 210 40% 96.1%;
161-
--secondary-foreground: 222.2 47.4% 11.2%;
162-
--muted: 210 40% 96.1%;
163-
--muted-foreground: 215.4 16.3% 46.9%;
164-
--accent: 210 40% 96.1%;
165-
--accent-foreground: 222.2 47.4% 11.2%;
166-
--destructive: 0 84.2% 60.2%;
167-
--destructive-foreground: 210 40% 98%;
168-
--border: 214.3 31.8% 91.4%;
169-
--input: 214.3 31.8% 91.4%;
170-
--ring: 221.2 83.2% 53.3%;
171-
--radius: 0.5rem;
172-
}
173-
.dark {
174-
--background: 222.2 84% 4.9%;
175-
--foreground: 210 40% 98%;
176-
--card: 222.2 84% 4.9%;
177-
--card-foreground: 210 40% 98%;
178-
--popover: 222.2 84% 4.9%;
179-
--popover-foreground: 210 40% 98%;
180-
--primary: 210 40% 98%;
181-
--primary-foreground: 222.2 47.4% 11.2%;
182-
--secondary: 217.2 32.6% 17.5%;
183-
--secondary-foreground: 210 40% 98%;
184-
--muted: 217.2 32.6% 17.5%;
185-
--muted-foreground: 215 20.2% 65.1%;
186-
--accent: 217.2 32.6% 17.5%;
187-
--accent-foreground: 210 40% 98%;
188-
--destructive: 0 62.8% 30.6%;
189-
--destructive-foreground: 210 40% 98%;
190-
--border: 217.2 32.6% 17.5%;
191-
--input: 217.2 32.6% 17.5%;
192-
--ring: 212.7 26.8% 83.9%;
193-
}
194-
}
195-
196-
@layer base {
197-
* {
198-
@apply border-border;
199-
}
200-
body {
201-
@apply bg-background text-foreground;
202-
}
203-
}

0 commit comments

Comments
 (0)