diff --git a/.gitignore b/.gitignore
index 4482e33..2729c34 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,3 @@
-# Mac Files
-.DS_Store
-
 # Build files
 dist/
 build/
@@ -8,6 +5,12 @@ build/
 # Dependency directories
 node_modules/
 
+# Astro Docs
+.astro/
+
 # Coverage directory used by tools like istanbul
 coverage
-*.lcov
\ No newline at end of file
+*.lcov
+
+# Mac Files
+.DS_Store
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
index fe3e2f6..0d918db 100644
--- a/docs/src/layouts/Layout.astro
+++ b/docs/src/layouts/Layout.astro
@@ -2,7 +2,7 @@
 import Footer from '../components/Footer.astro';
 import GoogleAnalytics from '../components/GoogleAnalytics.astro';
 import Navbar from '../components/Navbar.astro';
-import '../app.css';
+import '../styles/app.css';
 
 import { siteMetadata } from '../constants';
 
diff --git a/docs/src/app.css b/docs/src/styles/app.css
similarity index 100%
rename from docs/src/app.css
rename to docs/src/styles/app.css
diff --git a/docs/tailwind.config.cjs b/docs/tailwind.config.ts
similarity index 57%
rename from docs/tailwind.config.cjs
rename to docs/tailwind.config.ts
index 5fc7828..a440d2f 100644
--- a/docs/tailwind.config.cjs
+++ b/docs/tailwind.config.ts
@@ -1,5 +1,8 @@
-/**@type {import("tailwindcss").Config} */
-module.exports = {
+import type { Config } from 'tailwindcss';
+import TailwindCSSAnimate from 'tailwindcss-animate';
+import TailwindCSSTypography from '@tailwindcss/typography';
+
+const config: Config = {
   darkMode: ['class', '[data-kb-theme="dark"]'],
   content: ['./src/**/*.{astro,ts,tsx}'],
   theme: {
@@ -11,20 +14,20 @@ module.exports = {
       },
       keyframes: {
         'accordion-down': {
-          from: { height: 0 },
+          from: { height: '0' },
           to: { height: 'var(--kb-accordion-content-height)' },
         },
         'accordion-up': {
           from: { height: 'var(--kb-accordion-content-height)' },
-          to: { height: 0 },
+          to: { height: '0' },
         },
         'content-show': {
-          from: { opacity: 0, transform: 'scale(0.96)' },
-          to: { opacity: 1, transform: 'scale(1)' },
+          from: { opacity: '0', transform: 'scale(0.96)' },
+          to: { opacity: '1', transform: 'scale(1)' },
         },
         'content-hide': {
-          from: { opacity: 1, transform: 'scale(1)' },
-          to: { opacity: 0, transform: 'scale(0.96)' },
+          from: { opacity: '1', transform: 'scale(1)' },
+          to: { opacity: '0', transform: 'scale(0.96)' },
         },
       },
       animation: {
@@ -35,5 +38,7 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [TailwindCSSAnimate, TailwindCSSTypography],
 };
+
+export default config;
diff --git a/docs/ui.config.json b/docs/ui.config.json
index 8dc3edd..ec80767 100644
--- a/docs/ui.config.json
+++ b/docs/ui.config.json
@@ -2,8 +2,8 @@
   "tsx": true,
   "componentDir": "./src/components/ui",
   "tailwind": {
-    "config": "tailwind.config.cjs",
-    "css": "src/app.css"
+    "config": "tailwind.config.ts",
+    "css": "src/styles/app.css"
   },
   "aliases": {
     "path": "~/*"