add text shadow

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">

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>

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