Skip to content

Commit 91b26be

Browse files
mythzmythz
committed
upgrade to tailwincss v4
1 parent c610ae2 commit 91b26be

File tree

5 files changed

+187
-4278
lines changed

5 files changed

+187
-4278
lines changed

‎MyApp/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"postinstall": "dotnet run --AppTasks=migrate",
44
"dtos": "x mjs",
55
"dev": "dotnet watch",
6-
"ui:dev": "npx tailwindcss@v3 -i ./tailwind.input.css -o ./wwwroot/css/app.css --watch",
7-
"ui:build": "npx tailwindcss@v3 -i ./tailwind.input.css -o ./wwwroot/css/app.css --minify",
6+
"ui:dev": "tailwindcss -i ./tailwind.input.css -o ./wwwroot/css/app.css --watch",
7+
"ui:build": "tailwindcss -i ./tailwind.input.css -o ./wwwroot/css/app.css --minify",
88
"build": "npm run ui:build",
99
"migrate": "dotnet run --AppTasks=migrate",
1010
"revert:last": "dotnet run --AppTasks=migrate.revert:last",

‎MyApp/tailwind.config.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
module.exports = {
2-
content: ["./**/*.{html,js,mjs,md,cshtml,razor,cs}", "./Pages/**/*.{cshtml,razor}","../MyApp.Client/**/*.razor"],
3-
darkMode: 'class',
4-
theme: {
5-
extend: {
6-
colors: {
7-
'accent-1': '#FAFAFA',
8-
'accent-2': '#EAEAEA',
9-
danger: 'rgb(153 27 27)',
10-
success: 'rgb(22 101 52)',
11-
},
12-
},
13-
},
14-
plugins: [],
15-
}
1+
export default {
2+
content: [
3+
'./Components/**/*.{razor,html,cshtml}',
4+
'../MyApp.Client/**/*.{razor,html,cshtml}',
5+
'./wwwroot/tailwind/**/*.html',
6+
],
7+
theme: {
8+
extend: {
9+
colors: {
10+
'accent-1': '#FAFAFA',
11+
'accent-2': '#EAEAEA',
12+
danger: 'rgb(153 27 27)',
13+
success: 'rgb(22 101 52)',
14+
},
15+
},
16+
}
17+
}

‎MyApp/tailwind.input.css‎

Lines changed: 162 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,146 @@
1-
@tailwind base;
2-
@tailwind components;
3-
4-
/* @tailwindcss/forms css */
5-
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='month'],[type='search'],[type='tel'],[type='time'],[multiple],textarea,select
6-
{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:0.5rem 0.75rem;font-size:1rem;line-height:1.5rem}
7-
[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='month']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[multiple]:focus,textarea:focus,select:focus{
8-
outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
9-
--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
10-
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
11-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
12-
box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);border-color:#2563eb}
13-
input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}
14-
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#6b7280;opacity:1}
15-
input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}
16-
select{
17-
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
18-
background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}
19-
[multiple]{
20-
background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;color-adjust:unset;}
21-
[type='checkbox'],[type='radio']{
22-
-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;
23-
vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
24-
flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px}
25-
[type='checkbox']{border-radius:0}
26-
[type='radio']{border-radius:100%}
27-
[type='checkbox']:focus,[type='radio']:focus{
28-
outline:2px solid transparent;outline-offset:2px;
29-
--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
30-
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
31-
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
32-
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
33-
[type='checkbox']:checked,[type='radio']:checked{
34-
border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
35-
[type='checkbox']:checked{
36-
background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}
37-
[type='radio']:checked{
38-
background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}
39-
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
40-
border-color:transparent;background-color:currentColor}
41-
[type='checkbox']:indeterminate{
42-
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
43-
border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
44-
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}
45-
[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}
46-
[type='file']:focus{outline:1px auto -webkit-focus-ring-color;}
47-
48-
/* @tailwindcss/aspect css */
49-
.aspect-h-9 {
50-
--tw-aspect-h: 9;
51-
}
52-
.aspect-w-16 {
53-
position: relative;
54-
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
55-
--tw-aspect-w: 16;
56-
}
57-
.aspect-w-16 > * {
58-
position: absolute;
59-
height: 100%;
60-
width: 100%;
61-
top: 0;
62-
right: 0;
63-
bottom: 0;
64-
left: 0;
1+
@import "tailwindcss";
2+
@config "./tailwind.config.js";
3+
@source "./wwwroot/tailwind/ServiceStack.Blazor.html";
4+
@source "./Components/**/*.razor";
5+
@source "../MyApp.Client/**/*.razor";
6+
7+
@custom-variant dark (&:where(.dark, .dark *));
8+
9+
@layer base {
10+
:root {
11+
--background: 0 0% 100%;
12+
--foreground: 222.2 84% 4.9%;
13+
--border: 214.3 31.8% 91.4%;
14+
--input: 214.3 31.8% 91.4%;
15+
--ring: 221.2 83.2% 53.3%;
16+
--radius: 0.5rem;
17+
}
18+
:root.dark {
19+
--background: 222.2 84% 4.9%;
20+
--foreground: 210 40% 98%;
21+
--border: 217.2 32.6% 17.5%;
22+
--input: 217.2 32.6% 17.5%;
23+
--ring: 212.7 26.8% 83.9%;
24+
}
25+
26+
*,
27+
::after,
28+
::before,
29+
::backdrop,
30+
::file-selector-button {
31+
border-color: hsl(var(--border));
32+
}
33+
}
34+
35+
@theme {
36+
--default-ring-color: hsl(var(--ring));
37+
}
38+
39+
@layer base {
40+
41+
/*vue*/
42+
[v-cloak] {display:none}
43+
44+
/* override element defaults */
45+
b, strong { font-weight:600; }
46+
::-webkit-scrollbar{width:8px;height:8px}
47+
::-webkit-scrollbar-thumb{background-color:#ccc}
48+
[role=dialog].z-10 {
49+
z-index: 60;
50+
}
51+
em {
52+
color: #3b82f6;
53+
font-weight: 400;
54+
background-color: #eff6ff;
55+
border-radius: 0.25rem;
56+
padding: 0.125em 0.5rem;
57+
margin-left: 0.125em;
58+
margin-right: 0.125em;
59+
font-style: normal;
60+
}
61+
62+
/* @tailwindcss/forms css */
63+
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='week'],[type='search'],[type='tel'],[type='time'],[type='color'],[multiple],textarea,select
64+
{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-width:1px;padding:0.5rem 0.75rem;font-size:1rem}
65+
[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='datetime-local']:focus,[type='month']:focus,[type='week']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[type='color']:focus,[multiple]:focus,textarea:focus,select:focus{
66+
outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
67+
--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
68+
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
69+
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
70+
box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);border-color:#2563eb;}
71+
input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}
72+
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#6b7280;opacity:1}
73+
input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}
74+
select{
75+
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
76+
background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}
77+
[multiple]{
78+
background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;color-adjust:unset;}
79+
[type='checkbox'],[type='radio']{
80+
-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;
81+
vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
82+
flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-width:1px}
83+
[type='radio']{border-radius:100%}
84+
[type='checkbox']:focus,[type='radio']:focus{
85+
outline:2px solid transparent;outline-offset:2px;
86+
--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;
87+
--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
88+
--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
89+
box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
90+
[type='checkbox']:checked,[type='radio']:checked{
91+
border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
92+
[type='checkbox']:checked{
93+
background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}
94+
[type='radio']:checked{
95+
background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}
96+
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
97+
border-color:transparent;background-color:currentColor}
98+
[type='checkbox']:indeterminate{
99+
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
100+
border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
101+
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor}
102+
[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}
103+
[type='file']:focus{outline:1px auto -webkit-focus-ring-color;}
104+
[type='color']{height:2.4rem;padding:2px 3px}
105+
[type='range']{height:2.4rem}
106+
107+
@media (min-width: 640px) {
108+
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='week'],[type='search'],[type='tel'],[type='time'],[type='color'],[multiple],textarea,select {
109+
font-size: .875rem;
110+
line-height: 1.25rem;
111+
}
112+
}
113+
114+
/* dark mode autocomplete fields */
115+
.dark input:-webkit-autofill,
116+
.dark input:-webkit-autofill:hover,
117+
.dark input:-webkit-autofill:focus,
118+
.dark input:-webkit-autofill:active {
119+
transition: background-color 5000s ease-in-out 0s;
120+
-webkit-text-fill-color: #ffffff;
121+
}
122+
.dark input[data-autocompleted] {
123+
background-color: transparent !important;
124+
}
125+
126+
/* @tailwindcss/aspect css */
127+
.aspect-h-9 {
128+
--tw-aspect-h: 9;
129+
}
130+
.aspect-w-16 {
131+
position: relative;
132+
padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
133+
--tw-aspect-w: 16;
134+
}
135+
.aspect-w-16 > * {
136+
position: absolute;
137+
height: 100%;
138+
width: 100%;
139+
top: 0;
140+
right: 0;
141+
bottom: 0;
142+
left: 0;
143+
}
65144
}
66145

67146
.animate-spin {
@@ -87,7 +166,6 @@ select{
87166
color: rgb(63 131 248);
88167
}
89168

90-
91169
.svg-external {
92170
background: url("data:image/svg+xml,%3Csvg width='1.25rem' height='1.25rem' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M14 4h6m0 0v6m0-6L10 14' stroke='%231E40AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom right;
93171
padding-right: 1.35rem;
@@ -134,12 +212,29 @@ input[data-autocompleted] {
134212
background-color: transparent !important;
135213
}
136214

215+
strong {
216+
font-weight: 600;
217+
}
218+
219+
[data-collapsed] [data-collapse=hidden] {
220+
display: none
221+
}
222+
[data-collapse-off=opacity-100] {
223+
opacity: 1
224+
}
225+
[data-collapsed] [data-collapse=opacity-0] {
226+
opacity: 0
227+
}
228+
[data-collapse-off=-translate-x-full] {
229+
transform: translateX(0)
230+
}
231+
[data-collapsed] [data-collapse=-translate-x-full] {
232+
transform: translateX(-100%)
233+
}
137234

138235
@media (min-width: 640px) {
139236
.youtube {
140237
width: 761px;
141238
height: 428px;
142239
}
143240
}
144-
145-
@tailwind utilities;

0 commit comments

Comments
 (0)