From f1e2ddd7e47653cd1f68aff7e1499b2a4ec7f083 Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Tue, 14 Jan 2025 14:23:28 +0800
Subject: [PATCH] add text shadow

---
 components/card/CardTitle.vue           |  2 +-
 components/card/FullScreenIntroCard.vue |  2 +-
 tailwind.config.ts                      | 23 +++++++++++++++++++++--
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/components/card/CardTitle.vue b/components/card/CardTitle.vue
index 86ba53d..c3f686a 100644
--- a/components/card/CardTitle.vue
+++ b/components/card/CardTitle.vue
@@ -7,7 +7,7 @@ defineProps<{
 
 <template>
   <div class="my-16 relative">
-    <h3 class="text-5xl font-bold text-blue-400 relative z-10">
+    <h3 class="text-5xl font-bold text-shadow-lg shadow-blue-200 text-blue-400 relative z-10">
       {{ title }}
     </h3>
     <div class="h-12 w-auto text-5xl text-blue-200 absolute left-48 top-0 -translate-y-6">
diff --git a/components/card/FullScreenIntroCard.vue b/components/card/FullScreenIntroCard.vue
index f223cc8..aebecd4 100644
--- a/components/card/FullScreenIntroCard.vue
+++ b/components/card/FullScreenIntroCard.vue
@@ -61,7 +61,7 @@ onMounted(() => {
       <p class="text-gray-500">
         你好！欢迎来到
       </p>
-      <div class="relative mt-4 h-72 text-5xl text-blue-400 transition-all md:text-6xl lg:text-7xl">
+      <div class="relative mt-4 h-72 text-5xl text-blue-400 transition-all text-shadow-lg shadow-blue-200 md:text-6xl lg:text-7xl">
         <h1 style="font-family: BaconyScript,sans-serif">
           CantyOni_on's
         </h1>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d911017..0f60711 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,7 @@
 import type { Config } from 'tailwindcss'
 
+import plugin from 'tailwindcss/plugin'
+
 export default {
   content: [
     './components/**/*.{js,vue,ts}',
@@ -10,7 +12,24 @@ export default {
     './error.vue',
   ],
   theme: {
-    extend: {},
+    extend: {
+      textShadow: {
+        sm: '0 1px 2px var(--tw-shadow-color)',
+        DEFAULT: '0 2px 4px var(--tw-shadow-color)',
+        lg: '0 8px 16px var(--tw-shadow-color)',
+      },
+    },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'text-shadow': value => ({
+            textShadow: value,
+          }),
+        },
+        { values: theme('textShadow') },
+      )
+    }),
+  ],
 } satisfies Config