diff --git a/bun.lockb b/bun.lockb
index 6040435..f88408a 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/dev/App.module.css b/dev/App.module.css
deleted file mode 100644
index 48308b2..0000000
--- a/dev/App.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.logo {
-  animation: logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.link {
-  color: #b318f0;
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/dev/App.tsx b/dev/App.tsx
index 4fcf432..35aadf7 100644
--- a/dev/App.tsx
+++ b/dev/App.tsx
@@ -1,25 +1,19 @@
 import type { Component } from 'solid-js'
-import logo from './logo.svg'
-import styles from './App.module.css'
+import './app.css'
+
+// Hooks
+import { useClickOutside } from '../src'
 
 const App: Component = () => {
+  let ref = useClickOutside(() => {
+    alert('I have clicked outside')
+  })
+
   return (
-    <div class={styles.App}>
-      <header class={styles.header}>
-        <img src={logo} class={styles.logo} alt="logo" />
-        <h1></h1>
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          class={styles.link}
-          href="https://github.com/solidjs/solid"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn Solid
-        </a>
-      </header>
+    <div class="">
+      <p class="bg-green-500" ref={ref}>
+        Hello world!
+      </p>
     </div>
   )
 }
diff --git a/dev/app.css b/dev/app.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/dev/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/package.json b/package.json
index 4f60acd..d355a7d 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@types/node": "^22.7.4",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
+    "autoprefixer": "^10.4.20",
     "concurrently": "^9.0.1",
     "esbuild": "^0.24.0",
     "esbuild-plugin-solid": "^0.6.0",
@@ -63,8 +64,10 @@
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "jsdom": "^25.0.1",
+    "postcss": "^8.4.47",
     "prettier": "3.3.3",
     "solid-js": "^1.9.1",
+    "tailwindcss": "^3.4.13",
     "tsup": "^8.3.0",
     "tsup-preset-solid": "^2.2.0",
     "typescript": "^5.6.2",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..49a4c06
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./dev/**/*.{html,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}