3 files changed, 10 insertions, 11 deletions
diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro
index 5e241c44f..11c605a2f 100644
--- a/examples/with-tailwindcss/src/components/Button.astro
+++ b/examples/with-tailwindcss/src/components/Button.astro
@@ -1,10 +1,11 @@
 ---
-let { type = 'button' } = Astro.props;
+// Click button, get confetti!
+// Styled by Tailwind :)
 ---
-
-<button
-	class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
-	{type}
->
+<button class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
 	<slot />
 </button>
+<script hoist>
+	import confetti from 'canvas-confetti'; 
+	document.body.querySelector('button').addEventListener("click", () => confetti());
+</script>
+\ No newline at end of file
diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro
index ba346e6c2..743653a95 100644
--- a/examples/with-tailwindcss/src/pages/index.astro
+++ b/examples/with-tailwindcss/src/pages/index.astro
@@ -1,7 +1,6 @@
 ---
 // Component Imports
 import Button from '../components/Button.astro';
-import '../styles/global.css';
 
 // Full Astro Component Syntax:
 // https://docs.astro.build/core-concepts/astro-components/
@@ -15,6 +14,8 @@ import '../styles/global.css';
 	</head>
 
 	<body>
-		<Button>I’m a Tailwind Button!</Button>
+		<div class="grid place-items-center h-screen">
+			<Button>Click Me!</Button>
+		</div>
 	</body>
 </html>
diff --git a/examples/with-tailwindcss/src/styles/global.css b/examples/with-tailwindcss/src/styles/global.css
deleted file mode 100644
index b5c61c956..000000000
--- a/examples/with-tailwindcss/src/styles/global.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;