refactor(app): migrate small styles to tailwind

src/app/auth/components/__tests__/tailwind-components.test.tsx

@@ -0,0 +1,15 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { AuthErrorMessage } from "../auth-error-message";
+
+describe("auth Tailwind components", () => {
+  it("renders AuthErrorMessage only when a message is present", () => {
+    expect(renderToStaticMarkup(<AuthErrorMessage message={null} />)).toBe("");
+
+    const html = renderToStaticMarkup(<AuthErrorMessage message="Invalid email" />);
+    expect(html).toContain('role="alert"');
+    expect(html).toContain("text-error");
+    expect(html).toContain("Invalid email");
+  });
+});

src/app/auth/components/auth-error-message.module.css

@@ -1,16 +0,0 @@
-/* 
- *
- * 视觉规格（与 Dart 对齐）：
- *   - 细小红字，无背景，无圆角，无边框
- *   - 12px 居中
- */
-.banner {
-  width: 100%;
-  padding: 0;
-  background: transparent;
-  border: none;
-  color: var(--color-error);
-  font-size: var(--responsive-caption, var(--font-size-sm));
-  line-height: 1.4;
-  text-align: center;
-}

src/app/auth/components/auth-error-message.tsx

@@ -4,12 +4,13 @@
  *
  * 
  */
-import styles from "./auth-error-message.module.css";
-
 export function AuthErrorMessage({ message }: { message: string | null }) {
   if (!message) return null;
   return (
-    <div className={styles.banner} role="alert">
+    <div
+      className="w-full bg-transparent p-0 text-center text-[var(--responsive-caption)] leading-[1.4] text-error"
+      role="alert"
+    >
       {message}
     </div>
   );