diff --git a/docs/app/app.vue b/docs/app/app.vue
index a17d8245..1414eee9 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -91,3 +91,10 @@ provide('files', files)
     <LazyUContentSearch v-model:search-term="searchTerm" :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
   </UApp>
 </template>
+
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui-pro/dist/runtime/index.css";
+
+@source "../content/**/*.md";
+</style>
diff --git a/playground/app/app.vue b/playground/app/app.vue
index adebdf3f..3de97dbf 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -80,3 +80,8 @@ defineShortcuts({
     </UModal>
   </UApp>
 </template>
+
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui/dist/runtime/index.css";
+</style>
diff --git a/src/module.ts b/src/module.ts
index 4de15de7..5f8ec646 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -58,9 +58,6 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {}
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, 'isolate'].filter(Boolean).join(' ')
 
-    // Add keyframes for animations
-    nuxt.options.css.push(resolve('./runtime/assets/css/animations.css'))
-
     if (nuxt.options.builder === '@nuxt/vite-builder') {
       const plugin = await import('@tailwindcss/vite').then(r => r.default)
       addVitePlugin(plugin())
diff --git a/src/runtime/assets/css/animations.css b/src/runtime/assets/css/animations.css
deleted file mode 100644
index 545f66c8..00000000
--- a/src/runtime/assets/css/animations.css
+++ /dev/null
@@ -1,235 +0,0 @@
-@keyframes accordion-up {
-  from { height: var(--radix-accordion-content-height); }
-  to { height: 0; }
-}
-@keyframes accordion-down {
-  from { height: 0; }
-  to { height: var(--radix-accordion-content-height); }
-}
-
-@keyframes collapsible-up {
-  from { height: var(--radix-collapsible-content-height); }
-  to { height: 0; }
-}
-@keyframes collapsible-down {
-  from { height: 0; }
-  to { height: var(--radix-collapsible-content-height); }
-}
-
-@keyframes toast-collapsed-closed {
-  from { transform: var(--transform); }
-  to { transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale)); }
-}
-@keyframes toast-closed {
-  from { transform: var(--transform); }
-  to { transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor))); }
-}
-@keyframes toast-slide-left {
-  from { transform: translateX(0) translateY(var(--translate)); }
-  to { transform: translateX(-100%) translateY(var(--translate)); }
-}
-@keyframes toast-slide-right {
-  from { transform: translateX(0) translateY(var(--translate)); }
-  to { transform: translateX(100%) translateY(var(--translate)); }
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-@keyframes scale-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-}
-@keyframes scale-out {
-  from { opacity: 1; transform: scale(1); }
-  to { opacity: 0; transform: scale(0.95); }
-}
-
-@keyframes slide-in-from-top {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
-}
-@keyframes slide-out-to-top {
-  from { transform: translateY(0); }
-  to { transform: translateY(-100%); }
-}
-@keyframes slide-in-from-right {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
-}
-@keyframes slide-out-to-right {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
-}
-@keyframes slide-in-from-bottom {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-@keyframes slide-out-to-bottom {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
-}
-@keyframes slide-in-from-left {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
-}
-@keyframes slide-out-to-left {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
-}
-
-@keyframes slide-in-from-top-and-fade {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes slide-out-to-top-and-fade {
-  from { opacity: 1; transform: translateY(0); }
-  to { opacity: 0; transform: translateY(-4px); }
-}
-@keyframes slide-in-from-right-and-fade {
-  from { opacity: 0; transform: translateX(4px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes slide-out-to-right-and-fade {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(4px); }
-}
-@keyframes slide-in-from-bottom-and-fade {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-@keyframes slide-out-to-bottom-and-fade {
-  from { opacity: 1; transform: translateY(0); }
-  to { opacity: 0; transform: translateY(4px); }
-}
-@keyframes slide-in-from-left-and-fade {
-  from { opacity: 0; transform: translateX(-4px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes slide-out-to-left-and-fade {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(-4px); }
-}
-
-@keyframes enter-from-right {
-  from { opacity: 0; transform: translateX(200px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes enter-from-left {
-  from { opacity: 0; transform: translateX(-200px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-@keyframes exit-to-right {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(200px); }
-}
-@keyframes exit-to-left {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(-200px); }
-}
-@keyframes carousel {
-  0%,
-  100% {
-    width: 50%
-  }
-  0% {
-    transform: translateX(-100%)
-  }
-  100% {
-    transform: translateX(200%)
-  }
-}
-@keyframes carousel-vertical {
-  0%,
-  100% {
-    height: 50%
-  }
-  0% {
-    transform: translateY(-100%)
-  }
-  100% {
-    transform: translateY(200%)
-  }
-}
-
-@keyframes carousel-inverse {
-  0%,
-  100% {
-    width: 50%
-  }
-  0% {
-    transform: translateX(200%)
-  }
-  100% {
-    transform: translateX(-100%)
-  }
-}
-@keyframes carousel-inverse-vertical {
-  0%,
-  100% {
-    height: 50%
-  }
-  0% {
-    transform: translateY(200%)
-  }
-  100% {
-    transform: translateY(-100%)
-  }
-}
-
-@keyframes swing {
-  0%,
-  100% {
-    width: 50%
-  }
-  0%,
-  100% {
-    transform: translateX(-25%)
-  }
-  50% {
-    transform: translateX(125%)
-  }
-}
-@keyframes swing-vertical {
-  0%,
-  100% {
-    height: 50%
-  }
-  0%,
-  100% {
-    transform: translateY(-25%)
-  }
-  50% {
-    transform: translateY(125%)
-  }
-}
-
-@keyframes elastic {
-  /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
-  0%,
-  100% {
-    width: 50%;
-    margin-left: 25%;
-  }
-  50% {
-    width: 90%;
-    margin-left: 5%;
-  }
-}
-@keyframes elastic-vertical {
-  0%,
-  100% {
-    height: 50%;
-    margin-top: 25%;
-  }
-  50% {
-    height: 90%;
-    margin-top: 5%;
-  }
-}
diff --git a/src/runtime/index.css b/src/runtime/index.css
new file mode 100644
index 00000000..29d363b9
--- /dev/null
+++ b/src/runtime/index.css
@@ -0,0 +1,531 @@
+@theme {
+  --color-gray-*: initial;
+  --color-cool-50: #f9fafb;
+  --color-cool-100: #f3f4f6;
+  --color-cool-200: #e5e7eb;
+  --color-cool-300: #d1d5db;
+  --color-cool-400: #9ca3af;
+  --color-cool-500: #6b7280;
+  --color-cool-600: #4b5563;
+  --color-cool-700: #374151;
+  --color-cool-800: #1f2937;
+  --color-cool-900: #111827;
+  --color-cool-950: #030712;
+
+  --spacing-4_5: 1.125rem;
+
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-primary-950: var(--color-primary-950);
+  --color-error-50: var(--color-error-50);
+  --color-error-100: var(--color-error-100);
+  --color-error-200: var(--color-error-200);
+  --color-error-300: var(--color-error-300);
+  --color-error-400: var(--color-error-400);
+  --color-error-500: var(--color-error-500);
+  --color-error-600: var(--color-error-600);
+  --color-error-700: var(--color-error-700);
+  --color-error-800: var(--color-error-800);
+  --color-error-900: var(--color-error-900);
+  --color-error-950: var(--color-error-950);
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+  --color-gray-950: var(--color-gray-950);
+}
+
+@layer base {
+  :root {
+    color-scheme: light dark;
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes toast-collapsed-closed {
+    from {
+      transform: var(--transform);
+    }
+
+    to {
+      transform: translateY(calc((var(--before) - var(--height)) * var(--gap))) scale(var(--scale));
+    }
+  }
+
+  @keyframes toast-closed {
+    from {
+      transform: var(--transform);
+    }
+
+    to {
+      transform: translateY(calc((var(--offset) - var(--height)) * var(--translate-factor)));
+    }
+  }
+
+  @keyframes toast-slide-left {
+    from {
+      transform: translateX(0) translateY(var(--translate));
+    }
+
+    to {
+      transform: translateX(-100%) translateY(var(--translate));
+    }
+  }
+
+  @keyframes toast-slide-right {
+    from {
+      transform: translateX(0) translateY(var(--translate));
+    }
+
+    to {
+      transform: translateX(100%) translateY(var(--translate));
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes slide-in-from-top {
+    from {
+      transform: translateY(-100%);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-to-top {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes slide-in-from-right {
+    from {
+      transform: translateX(100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-to-right {
+    from {
+      transform: translateX(0);
+    }
+
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slide-in-from-bottom {
+    from {
+      transform: translateY(100%);
+    }
+
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-to-bottom {
+    from {
+      transform: translateY(0);
+    }
+
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes slide-in-from-left {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-to-left {
+    from {
+      transform: translateX(0);
+    }
+
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes slide-in-from-top-and-fade {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-to-top-and-fade {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
+
+  @keyframes slide-in-from-right-and-fade {
+    from {
+      opacity: 0;
+      transform: translateX(4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-to-right-and-fade {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(4px);
+    }
+  }
+
+  @keyframes slide-in-from-bottom-and-fade {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-out-to-bottom-and-fade {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+
+  @keyframes slide-in-from-left-and-fade {
+    from {
+      opacity: 0;
+      transform: translateX(-4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-out-to-left-and-fade {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-4px);
+    }
+  }
+
+  @keyframes enter-from-right {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes enter-from-left {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes exit-to-right {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes exit-to-left {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+
+  @keyframes carousel {
+
+    0%,
+    100% {
+      width: 50%
+    }
+
+    0% {
+      transform: translateX(-100%)
+    }
+
+    100% {
+      transform: translateX(200%)
+    }
+  }
+
+  @keyframes carousel-vertical {
+
+    0%,
+    100% {
+      height: 50%
+    }
+
+    0% {
+      transform: translateY(-100%)
+    }
+
+    100% {
+      transform: translateY(200%)
+    }
+  }
+
+  @keyframes carousel-inverse {
+
+    0%,
+    100% {
+      width: 50%
+    }
+
+    0% {
+      transform: translateX(200%)
+    }
+
+    100% {
+      transform: translateX(-100%)
+    }
+  }
+
+  @keyframes carousel-inverse-vertical {
+
+    0%,
+    100% {
+      height: 50%
+    }
+
+    0% {
+      transform: translateY(200%)
+    }
+
+    100% {
+      transform: translateY(-100%)
+    }
+  }
+
+  @keyframes swing {
+
+    0%,
+    100% {
+      width: 50%
+    }
+
+    0%,
+    100% {
+      transform: translateX(-25%)
+    }
+
+    50% {
+      transform: translateX(125%)
+    }
+  }
+
+  @keyframes swing-vertical {
+
+    0%,
+    100% {
+      height: 50%
+    }
+
+    0%,
+    100% {
+      transform: translateY(-25%)
+    }
+
+    50% {
+      transform: translateY(125%)
+    }
+  }
+
+  @keyframes elastic {
+
+    /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
+    0%,
+    100% {
+      width: 50%;
+      margin-left: 25%;
+    }
+
+    50% {
+      width: 90%;
+      margin-left: 5%;
+    }
+  }
+
+  @keyframes elastic-vertical {
+
+    0%,
+    100% {
+      height: 50%;
+      margin-top: 25%;
+    }
+
+    50% {
+      height: 90%;
+      margin-top: 5%;
+    }
+  }
+}
diff --git a/src/templates.ts b/src/templates.ts
index 40f94ca9..aedb157d 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -1,58 +1,11 @@
 import { fileURLToPath } from 'node:url'
 import { kebabCase } from 'scule'
-import { addTemplate, addTypeTemplate, hasNuxtModule } from '@nuxt/kit'
+import { addTemplate, addTypeTemplate } from '@nuxt/kit'
 import type { Nuxt } from '@nuxt/schema'
 import type { ModuleOptions } from './module'
 import * as theme from './theme'
 
 export function addTemplates(options: ModuleOptions, nuxt: Nuxt) {
-  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-
-  if (!nuxt.options.css.find(path => path.endsWith('tailwind.css'))) {
-    const template = addTemplate({
-      filename: 'tailwind.css',
-      write: true,
-      getContents: () => `@import "tailwindcss";
-@import "./ui.css";
-${hasNuxtModule('@nuxt/content') ? '@source "../content/**/*.md";' : ''}
-`
-    })
-
-    nuxt.options.css.unshift(template.dst)
-  }
-
-  addTemplate({
-    filename: 'ui.css',
-    write: true,
-    getContents: () => `@layer base {
-  :root {
-    color-scheme: light dark;
-  }
-}
-
-@theme {
-  --color-gray-*: initial;
-  --color-cool-50: #f9fafb;
-  --color-cool-100: #f3f4f6;
-  --color-cool-200: #e5e7eb;
-  --color-cool-300: #d1d5db;
-  --color-cool-400: #9ca3af;
-  --color-cool-500: #6b7280;
-  --color-cool-600: #4b5563;
-  --color-cool-700: #374151;
-  --color-cool-800: #1f2937;
-  --color-cool-900: #111827;
-  --color-cool-950: #030712;
-
-  --spacing-4_5: 1.125rem;
-
-  ${shades.map(shade => `--color-primary-${shade}: var(--color-primary-${shade});`).join('\n\t')}
-  ${shades.map(shade => `--color-error-${shade}: var(--color-error-${shade});`).join('\n\t')}
-  ${shades.map(shade => `--color-gray-${shade}: var(--color-gray-${shade});`).join('\n\t')}
-}
-`
-  })
-
   for (const component in theme) {
     addTemplate({
       filename: `ui/${kebabCase(component)}.ts`,