feat: shadow

src/lib/components/Playground.svelte

@@ -66,6 +66,21 @@
 			</div>
 		{/each}
 	</section>
+
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Button Shadow</h2>
+		<button class="shadow-button-shadow p-4 bg-white text-black rounded">
+			Button with Shadow
+		</button>
+	</section>
+
+	<!-- Card Shadow Test -->
+	<section class="section">
+		<h2 class="font-bold text-2xl mb-4">Card Shadow (Hover)</h2>
+		<div class="p-6 bg-white text-black rounded shadow-card-shadow hover:shadow-card-shadow-hover transition-shadow">
+			Card with hover shadow
+		</div>
+	</section>
 </div>
 
 <style>

src/styles/tailwind/shadow.ts

@@ -0,0 +1,6 @@
+export const boxShadow = {
+    'button-shadow': '0px 4px 12px 0px rgba(0, 0, 0, 0.15)',
+    'card-shadow': '0px 8px 24px 0px rgba(0, 0, 0, 0.15) ',  
+    // we cannot specify the hover: state directly on box shadow
+    'card-shadow-hover': '0px 8px 24px 0px rgba(0, 0, 0, 0.25)',
+}

tailwind.config.js

@@ -1,11 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 import { colorScheme } from './src/styles/tailwind/color';
-
+import { boxShadow } from './src/styles/tailwind/shadow';
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {
-			colors: colorScheme
+			colors: colorScheme,
+			boxShadow: boxShadow
 		}
 	},
 	plugins: []