Upgrade to tailwindcss v4

mythz · mythz · commit 613d184704d1 · 2025-05-14T01:48:32.000+08:00
diff --git a/MyApp/Areas/Identity/Pages/Account/ExternalLogin.cshtml b/MyApp/Areas/Identity/Pages/Account/ExternalLogin.cshtml
@@ -22,7 +22,7 @@
                     <div>
                         <div>
                             <label asp-for="Input.Email" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                            <div class="mt-1 relative rounded-md shadow-sm">
+                            <div class="mt-1 relative">
                                 <input type="text" class="@Css.InputText" asp-for="Input.Email" spellcheck="false">
                             </div>
                             <p asp-validation-for="Input.Email" class="text-danger"></p>
diff --git a/MyApp/Areas/Identity/Pages/Account/ForgotPassword.cshtml b/MyApp/Areas/Identity/Pages/Account/ForgotPassword.cshtml
@@ -16,7 +16,7 @@
                     <div>
                         <div>
                             <label asp-for="Input.Email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
-                            <div class="mt-1 relative rounded-md shadow-sm">
+                            <div class="mt-1 relative">
                                 <input type="text" class="@Css.InputText" asp-for="Input.Email" spellcheck="false">
                             </div>
                             <p asp-validation-for="Email" class="text-danger"></p>
diff --git a/MyApp/Areas/Identity/Pages/Account/Login.cshtml b/MyApp/Areas/Identity/Pages/Account/Login.cshtml
@@ -28,15 +28,15 @@
                         <div>
                             <div>
                                 <label for="UserName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
-                                <div class="mt-1 relative rounded-md shadow-sm">
+                                <div class="mt-1 relative">
                                     <input type="text" class="@Css.InputText" id="Email" name="Email" placeholder="Email" spellcheck="false" value="@Html.GetFormData("Email")">
                                 </div>
                             </div>                            
                         </div>
                         <div>
                             <div>
                                 <label for="UserName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
-                                <div class="mt-1 relative rounded-md shadow-sm">
+                                <div class="mt-1 relative">
                                     <input class="@Css.InputText" id="Password" name="Password" type="Password" placeholder="Password" value="">
                                 </div>
                             </div>                            
diff --git a/MyApp/Areas/Identity/Pages/Account/LoginWith2fa.cshtml b/MyApp/Areas/Identity/Pages/Account/LoginWith2fa.cshtml
@@ -18,7 +18,7 @@
                 <div class="flex flex-col gap-y-4">
                     <div>
                         <label asp-for="Input.TwoFactorCode" class="@Css.LabelClasses" />
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="text" asp-for="Input.TwoFactorCode" class="@Css.InputText" autocomplete="off" />
                         </div>
                         <span asp-validation-for="Input.TwoFactorCode" class="mt-2 text-danger text-sm"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/LoginWithRecoveryCode.cshtml b/MyApp/Areas/Identity/Pages/Account/LoginWithRecoveryCode.cshtml
@@ -18,7 +18,7 @@
                 <div class="flex flex-col gap-y-4">
                     <div>
                         <label asp-for="Input.RecoveryCode" class="@Css.LabelClasses"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input asp-for="Input.RecoveryCode" class="@Css.InputText" autocomplete="off" placeholder="RecoveryCode" />
                         </div>
                         <span asp-validation-for="Input.RecoveryCode" class="mt-2 text-danger text-sm"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml b/MyApp/Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml
@@ -19,21 +19,21 @@
                 <div class="flex flex-col gap-y-4">
                     <div>
                         <label asp-for="Input.OldPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="password" class="@Css.InputText" asp-for="Input.OldPassword" spellcheck="false">
                         </div>
                         <span asp-validation-for="Input.OldPassword" class="text-danger"></span>
                     </div>
                     <div>
                         <label asp-for="Input.NewPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="password" class="@Css.InputText" asp-for="Input.NewPassword" spellcheck="false">
                         </div>
                         <span asp-validation-for="Input.NewPassword" class="text-danger"></span>
                     </div>
                     <div>
                         <label asp-for="Input.ConfirmPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="password" class="@Css.InputText" asp-for="Input.ConfirmPassword" spellcheck="false">
                         </div>
                         <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml b/MyApp/Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml
@@ -18,7 +18,7 @@
                 <div>
                     <div>
                         <label asp-for="Input.Password" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input asp-for="Input.Password" class="@Css.InputText" autocomplete="current-password" aria-required="true" placeholder="Please enter your password." />
                         </div>
                         <span asp-validation-for="Input.Password" class="text-danger"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/Manage/Email.cshtml b/MyApp/Areas/Identity/Pages/Account/Manage/Email.cshtml
@@ -34,15 +34,15 @@
                     {
                         <div>
                             <label asp-for="Email" class="@Css.LabelClasses"></label>
-                            <div class="mt-1 relative rounded-md shadow-sm">
+                            <div class="mt-1 relative">
                                 <input asp-for="Email" class="@Css.InputText" placeholder="Please enter your email." disabled />
                             </div>
                             <button id="email-verification" type="submit" asp-page-handler="SendVerificationEmail" class="mt-2 @Css.SecondaryButton">Send verification email</button>
                         </div>
                     }
                     <div>
                         <label for="new-email" class="@Css.LabelClasses">New email</label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input asp-for="Input.NewEmail" class="@Css.InputText" autocomplete="email" aria-required="true" placeholder="Please enter new email." />
                         </div>
                         <span asp-validation-for="Input.NewEmail" class="mt-2 text-danger text-sm"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/Manage/Index.cshtml b/MyApp/Areas/Identity/Pages/Account/Manage/Index.cshtml
@@ -19,13 +19,13 @@
                 <div class="flex flex-col gap-y-4">
                     <div>
                         <label asp-for="Username" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="text" class="@Css.InputText" asp-for="Username" disabled>
                         </div>
                     </div>
                     <div>
                         <label asp-for="Input.PhoneNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="text" class="@Css.InputText" asp-for="Input.PhoneNumber">
                         </div>
                         <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/Manage/SetPassword.cshtml b/MyApp/Areas/Identity/Pages/Account/Manage/SetPassword.cshtml
@@ -21,14 +21,14 @@
                 <div class="flex flex-col gap-4">
                     <div>
                         <label asp-for="Input.NewPassword" class="@Css.LabelClasses"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input asp-for="Input.NewPassword" class="@Css.InputText" autocomplete="new-password" placeholder="Please enter your new password." />
                         </div>
                         <span asp-validation-for="Input.NewPassword" class="mt-2 text-danger text-sm"></span>
                     </div>
                     <div>
                         <label asp-for="Input.ConfirmPassword" class="@Css.LabelClasses"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input asp-for="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" placeholder="Please confirm your new password." />
                         </div>
                         <span asp-validation-for="Input.ConfirmPassword" class="mt-2 text-danger text-sm"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/Register.cshtml b/MyApp/Areas/Identity/Pages/Account/Register.cshtml
@@ -15,21 +15,21 @@
                 <div class="flex flex-col gap-y-4">
                     <div>
                         <label asp-for="Input.Email" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="text" class="@Css.InputText" asp-for="Input.Email" spellcheck="false">
                         </div>
                         <span asp-validation-for="Input.Email" class="text-danger"></span>
                     </div>
                     <div>
                         <label asp-for="Input.Password" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="password" class="@Css.InputText" asp-for="Input.Password" spellcheck="false">
                         </div>
                         <span asp-validation-for="Input.Password" class="text-danger"></span>
                     </div>
                     <div>
                         <label asp-for="Input.ConfirmPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input type="password" class="@Css.InputText" asp-for="Input.ConfirmPassword" spellcheck="false">
                         </div>
                         <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/ResendEmailConfirmation.cshtml b/MyApp/Areas/Identity/Pages/Account/ResendEmailConfirmation.cshtml
@@ -13,7 +13,7 @@
         <div class="flex flex-col gap-y-4">
             <div>
                 <label asp-for="Input.Email" class="@Css.LabelClasses"></label>
-                <div class="mt-1 relative rounded-md shadow-sm">
+                <div class="mt-1 relative">
                     <input asp-for="Input.Email" class="@Css.InputText" aria-required="true" placeholder="name@example.com" />
                 </div>
                 <span asp-validation-for="Input.Email" class="mt-2 text-danger text-sm"></span>
diff --git a/MyApp/Areas/Identity/Pages/Account/ResetPassword.cshtml b/MyApp/Areas/Identity/Pages/Account/ResetPassword.cshtml
@@ -17,21 +17,21 @@
                 <div class="flex flex-col gap-y-4">
                     <div>
                         <label asp-for="Input.Email" class="@Css.LabelClasses"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input asp-for="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                         </div>
                         <span asp-validation-for="Input.Email" class="mt-2 text-danger text-sm"></span>
                     </div>
                     <div>
                         <label asp-for="Input.Password" class="@Css.LabelClasses"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input asp-for="Input.Password" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please enter your password." />
                         </div>
                         <span asp-validation-for="Input.Password" class="mt-2 text-danger text-sm"></span>
                     </div>
                     <div>
                         <label asp-for="Input.ConfirmPassword" class="@Css.LabelClasses"></label>
-                        <div class="mt-1 relative rounded-md shadow-sm">
+                        <div class="mt-1 relative">
                             <input asp-for="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please confirm your password." />
                         </div>
                         <span asp-validation-for="Input.ConfirmPassword" class="mt-2 text-danger text-sm"></span>
diff --git a/MyApp/Pages/Admin/Index.cshtml b/MyApp/Pages/Admin/Index.cshtml
@@ -12,10 +12,10 @@
     <div class="mt-2">
         @foreach (var role in await user.GetRolesAsync(AuthRepositoryAsync))
         {
-            <span class="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-indigo-100 text-indigo-800">
+            <span class="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-indigo-100 dark:bg-indigo-800 text-indigo-800 dark:text-indigo-100">
                 @role
             </span>
         }
     </div>
-    <a href="/auth/logout" class="mt-8 bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mt-8 mt-8">Sign Out</a>
+    <a href="/auth/logout" class="mt-8 bg-white dark:bg-black py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mt-8 mt-8">Sign Out</a>
 </div>
diff --git a/MyApp/package.json b/MyApp/package.json
@@ -3,8 +3,8 @@
         "postinstall": "node postinstall.js",
         "dtos": "x mjs",
         "dev": "dotnet watch",
-        "ui:dev": "npx --yes tailwindcss@v3 -i ./tailwind.input.css -o ./wwwroot/css/app.css --watch",
-        "ui:build": "npx --yes tailwindcss@v3 -i ./tailwind.input.css -o ./wwwroot/css/app.css --minify",
+        "ui:dev": "tailwindcss -i ./tailwind.input.css -o ./wwwroot/css/app.css --watch",
+        "ui:build": "tailwindcss -i ./tailwind.input.css -o ./wwwroot/css/app.css --minify",
         "build": "npm run ui:build",
         "migrate": "dotnet run --AppTasks=migrate",
         "revert:last": "dotnet run --AppTasks=migrate.revert:last",
diff --git a/MyApp/postinstall.js b/MyApp/postinstall.js
diff --git a/MyApp/tailwind.config.js b/MyApp/tailwind.config.js
diff --git a/MyApp/tailwind.input.css b/MyApp/tailwind.input.css
diff --git a/MyApp/wwwroot/css/app.css b/MyApp/wwwroot/css/app.css
diff --git a/MyApp/wwwroot/tailwind/ServiceStack.Blazor.html b/MyApp/wwwroot/tailwind/ServiceStack.Blazor.html
diff --git a/NuGet.Config b/NuGet.Config
