refactor(splash): migrate simple styles to tailwind

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

@@ -0,0 +1,35 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { SplashBackground } from "../splash-background";
+import { SplashContent } from "../splash-content";
+import { SplashLogo } from "../splash-logo";
+
+describe("splash Tailwind components", () => {
+  it("renders SplashLogo with Tailwind wrapper and image classes", () => {
+    const html = renderToStaticMarkup(<SplashLogo />);
+
+    expect(html).toContain("z-[2]");
+    expect(html).toContain("inline-flex");
+    expect(html).toContain("block h-auto w-auto");
+    expect(html).toContain("%2Fimages%2Fsplash%2Fic-logo-home.png");
+  });
+
+  it("renders SplashBackground with Tailwind fill image classes", () => {
+    const html = renderToStaticMarkup(<SplashBackground />);
+
+    expect(html).toContain("absolute");
+    expect(html).toContain("bg-sidebar-background");
+    expect(html).toContain("object-cover");
+    expect(html).toContain("%2Fimages%2Fsplash%2Fpic-bg-home.png");
+  });
+
+  it("renders SplashContent with Tailwind typography classes", () => {
+    const html = renderToStaticMarkup(<SplashContent />);
+
+    expect(html).toContain("flex flex-col gap-md");
+    expect(html).toContain("font-[var(--font-athelas)]");
+    expect(html).toContain("whitespace-pre-line");
+    expect(html).toContain("Welcome to my secret hideout");
+  });
+});

src/app/splash/components/splash-background.module.css

@@ -1,12 +0,0 @@
-.bg {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background: var(--color-sidebar-background);
-  overflow: hidden;
-}
-
-.image {
-  object-fit: cover;
-  object-position: center;
-}

src/app/splash/components/splash-background.tsx

@@ -12,18 +12,17 @@
  *   - 视口 > 540px：MobileShell = 540px，图片 = 540px
  */
 import Image from "next/image";
-import styles from "./splash-background.module.css";
 
 export function SplashBackground() {
   return (
-    <div className={styles.bg}>
+    <div className="absolute inset-0 z-0 overflow-hidden bg-sidebar-background">
       <Image
         src="/images/splash/pic-bg-home.png"
         alt=""
         fill
         priority
         sizes="(max-width: 540px) 100vw, 540px"
-        className={styles.image}
+        className="object-cover object-center"
       />
     </div>
   );

src/app/splash/components/splash-content.module.css

@@ -1,18 +0,0 @@
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  z-index: 2;
-}
-
-.title {
-  font-family: var(--font-athelas);
-  font-size: var(--responsive-page-title, var(--font-size-title));
-  font-weight: 700;
-  font-style: italic;
-  line-height: 1.4;
-  color: #ffffff;
-  text-align: left;
-  white-space: pre-line;
-  margin: 0;
-}

src/app/splash/components/splash-content.tsx

@@ -1,14 +1,13 @@
 /**
  * Splash 主内容文案
  */
-import styles from "./splash-content.module.css";
 
 const APOSTROPHE = "'";
 
 export function SplashContent() {
   return (
-    <div className={styles.content}>
+    <div className="z-[2] flex flex-col gap-md">
-      <h1 className={styles.title}>
+      <h1 className="m-0 whitespace-pre-line text-left font-[var(--font-athelas)] text-[var(--responsive-page-title)] font-bold italic leading-[1.4] text-white">
         Welcome to my secret hideout~
         {"\n"}It{APOSTROPHE}s just the two of us now.
         {"\n"}Feel free to whisper your

src/app/splash/components/splash-logo.module.css

@@ -1,10 +0,0 @@
-.logo {
-  display: inline-flex;
-  z-index: 2;
-}
-
-.image {
-  display: block;
-  width: auto;
-  height: auto;
-}

src/app/splash/components/splash-logo.tsx

@@ -1,16 +1,15 @@
 import Image from "next/image";
-import styles from "./splash-logo.module.css";
 
 export function SplashLogo() {
   return (
-    <div className={styles.logo}>
+    <div className="z-[2] inline-flex">
       <Image
         src="/images/splash/ic-logo-home.png"
         alt="cozsweet"
         width={180}
         height={60}
         priority
-        className={styles.image}
+        className="block h-auto w-auto"
       />
     </div>
   );