From 2ee6f8b099f67127df0a6aca28539e65e594f1f6 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 24 Nov 2021 17:52:32 +0100
Subject: [PATCH] chore: replace shortcuts with prefix

---
 docs/app.vue                                  |  21 +---
 docs/nuxt.config.ts                           |  12 ++
 docs/pages/examples.vue                       |  38 +++---
 docs/pages/index.vue                          |  20 ++--
 docs/pages/migration.vue                      |  20 ++--
 src/components/elements/Avatar.vue            |  12 +-
 src/components/elements/Button.vue            |  14 +--
 src/components/elements/Dropdown.vue          |   8 +-
 src/components/elements/Toggle.vue            |   4 +-
 src/components/forms/Checkbox.vue             |   6 +-
 src/components/forms/Input.vue                |   8 +-
 src/components/forms/InputGroup.vue           |   8 +-
 src/components/forms/Radio.vue                |   6 +-
 src/components/forms/Select.vue               |   2 +-
 src/components/forms/SelectCustom.vue         |  14 +--
 src/components/forms/Textarea.vue             |   4 +-
 src/components/layout/Card.vue                |   6 +-
 src/components/navigation/Pills.vue           |   2 +-
 src/components/navigation/Tabs.vue            |   4 +-
 .../navigation/VerticalNavigation.vue         |  24 ++--
 src/components/overlays/Modal.vue             |   2 +-
 src/components/overlays/Notification.vue      |  14 +--
 src/components/overlays/Slideover.vue         |   4 +-
 src/index.ts                                  | 108 +++++++++---------
 24 files changed, 183 insertions(+), 178 deletions(-)

diff --git a/docs/app.vue b/docs/app.vue
index 93c70732..2a2eb96d 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <nav class="bg-white dark:bg-black border-b border-tw-gray-200 fixed top-0 inset-x-0 z-10">
+    <nav class="u-bg-white border-b u-border-gray-200 fixed top-0 inset-x-0 z-10">
       <UContainer padded>
         <div class="flex items-center justify-between h-16">
           <div class="flex items-center">
-            <NuxtLink to="/" class="block font-bold text-lg text-tw-gray-900">
+            <NuxtLink to="/" class="block font-bold text-lg u-text-gray-900">
               @nuxthq/ui
             </NuxtLink>
           </div>
@@ -22,7 +22,7 @@
           <nav class="overflow-y-auto h-auto py-12">
             <ul class="space-y-6">
               <li v-for="section of sections" :key="section">
-                <h5 class="mb-3 uppercase tracking-wide font-semibold text-xs text-tw-gray-900">
+                <h5 class="mb-3 uppercase tracking-wide font-semibold text-xs u-text-gray-900">
                   {{ section.label }}
                 </h5>
                 <ul class="space-y-1.5">
@@ -31,7 +31,7 @@
                       :to="link.to"
                       class="relative block text-sm rounded-md"
                       active-class="text-primary-600"
-                      inactive-class="text-tw-gray-500 hover:text-tw-gray-700"
+                      inactive-class="u-text-gray-500 hover:u-text-gray-700"
                       exact
                     >
                       {{ link.label }}
@@ -54,19 +54,6 @@
 <script setup>
 import { UseDark } from '@vueuse/components'
 
-useMeta({
-  title: '@nuxthq/ui',
-  meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
-  ],
-  htmlAttrs: {
-    class: 'bg-tw-white'
-  },
-  bodyAttrs: {
-    class: 'bg-tw-gray-50 text-tw-gray-700'
-  }
-})
-
 const sections = [
   { label: 'Getting Started', links: [{ label: 'Installation', to: '/' }, { label: 'Examples', to: '/examples' }, { label: 'Migration', to: '/migration' }] },
   { label: 'Elements', links: [{ label: 'Avatar', to: '/components/Avatar' }, { label: 'AvatarGroup', to: '/components/AvatarGroup' }, { label: 'Badge', to: '/components/Badge' }, { label: 'Button', to: '/components/Button' }, { label: 'Dropdown', to: '/components/Dropdown' }, { label: 'Icon', to: '/components/Icon' }, { label: 'Link', to: '/components/Link' }, { label: 'Toggle', to: '/components/Toggle' }] },
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 6347ebbb..0e9abf20 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -2,6 +2,18 @@ import { defineNuxtConfig } from 'nuxt3'
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
+  meta: {
+    title: '@nuxthq/ui',
+    meta: [
+      { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
+    ],
+    htmlAttrs: {
+      class: 'u-bg-white'
+    },
+    bodyAttrs: {
+      class: 'u-bg-gray-50 u-text-gray-700'
+    }
+  },
   buildModules: [
     '../src'
   ],
diff --git a/docs/pages/examples.vue b/docs/pages/examples.vue
index 618b8652..de35659d 100644
--- a/docs/pages/examples.vue
+++ b/docs/pages/examples.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="space-y-4">
-    <div class="pb-10 border-b border-tw-gray-200 mb-10">
+    <div class="pb-10 border-b u-border-gray-200 mb-10">
       <div>
-        <h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
+        <h1 class="inline-block text-3xl font-extrabold u-text-gray-900 tracking-tight">
           Examples
         </h1>
       </div>
 
-      <p class="mt-1 text-lg text-tw-gray-500">
+      <p class="mt-1 text-lg u-text-gray-500">
         Examples of real-life usage of components.
       </p>
     </div>
 
     <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Avatar:
       </div>
 
@@ -21,7 +21,7 @@
     </div>
 
     <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Button:
       </div>
 
@@ -31,7 +31,7 @@
     </div>
 
     <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Modal:
       </div>
 
@@ -45,11 +45,11 @@
             <UIcon name="heroicons-outline:exclamation" class="h-6 w-6 text-red-600" aria-hidden="true" />
           </div>
           <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-            <h3 class="text-lg leading-6 font-medium text-tw-gray-900">
+            <h3 class="text-lg leading-6 font-medium u-text-gray-900">
               Deactivate account
             </h3>
             <div class="mt-2">
-              <p class="text-sm text-tw-gray-500">
+              <p class="text-sm u-text-gray-500">
                 Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
               </p>
             </div>
@@ -59,7 +59,7 @@
           <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
             Deactivate
           </button>
-          <button ref="cancelButtonRef" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-tw-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-tw-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false">
+          <button ref="cancelButtonRef" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border u-border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium u-text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" @click="open = false">
             Cancel
           </button>
         </div>
@@ -67,7 +67,7 @@
     </div>
 
     <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Dropdown:
       </div>
 
@@ -79,7 +79,7 @@
     </div>
 
     <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Dropdown with avatar:
       </div>
 
@@ -96,7 +96,7 @@
     </div>
 
     <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Popover:
       </div>
 
@@ -124,10 +124,10 @@
                   <div v-html="item.icon" />
                 </div>
                 <div class="ml-4">
-                  <p class="text-sm font-medium text-tw-gray-900">
+                  <p class="text-sm font-medium u-text-gray-900">
                     {{ item.name }}
                   </p>
-                  <p class="text-sm text-tw-gray-500">
+                  <p class="text-sm u-text-gray-500">
                     {{ item.description }}
                   </p>
                 </div>
@@ -139,11 +139,11 @@
                 class="flow-root px-2 py-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
               >
                 <span class="flex items-center">
-                  <span class="text-sm font-medium text-tw-gray-900">
+                  <span class="text-sm font-medium u-text-gray-900">
                     Documentation
                   </span>
                 </span>
-                <span class="block text-sm text-tw-gray-500">
+                <span class="block text-sm u-text-gray-500">
                   Start integrating products and tools
                 </span>
               </a>
@@ -154,7 +154,7 @@
     </div>
 
     <!-- <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Tooltip:
       </div>
 
@@ -164,14 +164,14 @@
     </div> -->
 
     <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Toggle:
       </div>
       <UToggle v-model="isSwitchEnabled" icon-off="heroicons-solid:x" icon-on="heroicons-solid:check" />
     </div>
 
     <div>
-      <div class="font-medium text-sm mb-1 text-tw-gray-700">
+      <div class="font-medium text-sm mb-1 u-text-gray-700">
         Card:
       </div>
 
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index b9535f22..92f74216 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -1,29 +1,29 @@
 <template>
   <div class="space-y-4">
-    <div class="pb-10 border-b border-tw-gray-200 mb-10">
+    <div class="pb-10 border-b u-border-gray-200 mb-10">
       <div>
-        <h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
+        <h1 class="inline-block text-3xl font-extrabold u-text-gray-900 tracking-tight">
           Documentation
         </h1>
       </div>
 
-      <p class="mt-1 text-lg text-tw-gray-500">
+      <p class="mt-1 text-lg u-text-gray-500">
         Components library as a Nuxt3 module using <a href="https://github.com/antfu/unocss" target="_blank">UnoCSS</a>.
       </p>
     </div>
 
-    <h2 class="font-bold text-2xl text-tw-gray-900">
+    <h2 class="font-bold text-2xl u-text-gray-900">
       Installation
     </h2>
 
-    <pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
 yarn add --dev @nuxthq/ui</code>
     </pre>
 
     <p>Then, register the module in your `nuxt.config.js`:</p>
 
-    <pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
 import { defineNuxtConfig } from 'nuxt3'
 
@@ -36,7 +36,7 @@ export default defineNuxtConfig({
 
     <p>If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:</p>
 
-    <pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
 {
   "devDependencies": {
@@ -45,7 +45,7 @@ export default defineNuxtConfig({
 }</code>
     </pre>
 
-    <h2 class="font-bold text-2xl text-tw-gray-900">
+    <h2 class="font-bold text-2xl u-text-gray-900">
       Options
     </h2>
 
@@ -57,7 +57,7 @@ export default defineNuxtConfig({
       Example:
     </p>
 
-    <pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
 import { defineNuxtConfig } from 'nuxt3'
 
@@ -79,7 +79,7 @@ export default defineNuxtConfig({
       Example:
     </p>
 
-    <pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
+    <pre class="u-bg-gray-900 rounded-md u-text-white px-4">
       <code class="text-sm">
 import { defineNuxtConfig } from 'nuxt3'
 
diff --git a/docs/pages/migration.vue b/docs/pages/migration.vue
index c6f58060..d4501035 100644
--- a/docs/pages/migration.vue
+++ b/docs/pages/migration.vue
@@ -1,37 +1,37 @@
 <template>
   <div class="space-y-4">
-    <div class="pb-10 border-b border-tw-gray-200 mb-10">
+    <div class="pb-10 border-b u-border-gray-200 mb-10">
       <div>
-        <h1 class="inline-block text-3xl font-extrabold text-tw-gray-900 tracking-tight">
+        <h1 class="inline-block text-3xl font-extrabold u-text-gray-900 tracking-tight">
           Migration
         </h1>
       </div>
 
-      <p class="mt-1 text-lg text-tw-gray-500">
+      <p class="mt-1 text-lg u-text-gray-500">
         Check out the components that have been migrated to Vue3 coming from `@nuxthq/volta-ui`.
       </p>
     </div>
 
     <UCard body-class>
-      <table class="min-w-full divide-y divide-tw-gray-200">
-        <thead class="bg-tw-gray-50">
+      <table class="min-w-full divide-y u-divide-gray-200">
+        <thead class="u-bg-gray-50">
           <tr>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-tw-gray-500 uppercase tracking-wider">
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
               Component
             </th>
-            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-tw-gray-500 uppercase tracking-wider">
+            <th scope="col" class="px-6 py-3 text-left text-xs font-medium u-text-gray-500 uppercase tracking-wider">
               Ready?
             </th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(component, index) of components" :key="index" :class="index % 2 === 0 ? 'bg-tw-white' : 'bg-tw-gray-50'">
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-tw-gray-900">
+          <tr v-for="(component, index) of components" :key="index" :class="index % 2 === 0 ? 'u-bg-white' : 'u-bg-gray-50'">
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium u-text-gray-900">
               <NuxtLink :to="component.to" class="hover:underline">
                 {{ component.label }}
               </NuxtLink>
             </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-tw-gray-500">
+            <td class="px-6 py-4 whitespace-nowrap text-sm u-text-gray-500">
               <span v-if="component.ready">✅</span>
               <span v-else>❌</span>
             </td>
diff --git a/src/components/elements/Avatar.vue b/src/components/elements/Avatar.vue
index 0aa777d9..55e00cd3 100644
--- a/src/components/elements/Avatar.vue
+++ b/src/components/elements/Avatar.vue
@@ -5,11 +5,11 @@
     <span v-else-if="gradientPlaceholder" class="w-full h-full overflow-hidden" :class="roundedClass" v-html="gradientPlaceholder" />
     <span
       v-else-if="placeholder"
-      class="font-medium leading-none text-white uppercase"
+      class="font-medium leading-none u-text-gray-900 uppercase"
     >{{ placeholder }}</span>
     <svg
       v-else
-      class="w-full h-full text-tw-gray-300"
+      class="w-full h-full u-text-gray-300"
       :class="roundedClass"
       fill="currentColor"
       viewBox="0 0 24 24"
@@ -21,7 +21,7 @@
 
     <span
       v-if="status"
-      class="absolute top-0 right-0 block rounded-full ring-1 ring-white dark:ring-black"
+      class="absolute top-0 right-0 block rounded-full ring-1 u-ring-white"
       :class="statusClass"
     />
   </span>
@@ -109,8 +109,8 @@ export default {
     },
     placeholderClass () {
       return ({
-        true: 'bg-gray-500 dark:bg-gray-900',
-        false: 'bg-tw-gray-100'
+        true: 'u-bg-gray-100',
+        false: 'u-bg-gray-100'
       })[!!this.alt]
     },
     avatarClass () {
@@ -126,7 +126,7 @@ export default {
         ({
           online: 'bg-green-400',
           idle: 'bg-yellow-400',
-          invisible: 'bg-tw-gray-300',
+          invisible: 'u-bg-gray-300',
           donotdisturb: 'bg-red-400',
           focus: 'bg-primary-500'
         })[this.status],
diff --git a/src/components/elements/Button.vue b/src/components/elements/Button.vue
index 539eaccc..fd1840d5 100644
--- a/src/components/elements/Button.vue
+++ b/src/components/elements/Button.vue
@@ -195,13 +195,13 @@ export default {
         primary: 'shadow-sm border border-transparent text-white bg-primary-600 hover:bg-primary-700 disabled:bg-primary-600',
         secondary: 'border border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 disabled:bg-primary-100',
         danger: 'shadow-sm border border-transparent text-white bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-500 disabled:bg-red-500 dark:disabled:bg-red-600',
-        white: 'shadow-sm border border-tw-gray-300 text-tw-gray-700 bg-tw-white hover:bg-tw-gray-50 disabled:bg-tw-white',
-        'white-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900 disabled:text-tw-gray-500',
-        gray: 'shadow-sm border border-tw-gray-300 text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-gray-50 dark:bg-gray-800 disabled:text-tw-gray-500',
-        'gray-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800 disabled:text-tw-gray-500',
-        black: 'border border-transparent text-tw-white bg-tw-gray-800 hover:bg-tw-gray-900 focus:bg-tw-gray-900',
-        'black-hover': 'border border-transparent text-tw-gray-500 hover:text-tw-gray-900 focus:text-tw-gray-700 bg-transparent hover:bg-white dark:hover:bg-black focus:bg-white dark:focus:bg-black',
-        transparent: 'border border-transparent text-tw-gray-500 hover:text-tw-gray-700 focus:text-tw-gray-700 disabled:hover:text-tw-gray-500',
+        white: 'shadow-sm border u-border-gray-300 u-text-gray-700 u-bg-white hover:u-bg-gray-50 disabled:u-bg-white',
+        'white-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900 disabled:u-text-gray-500',
+        gray: 'shadow-sm border u-border-gray-300 u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-gray-50 dark:bg-gray-800 disabled:u-text-gray-500',
+        'gray-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 bg-transparent hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800 disabled:u-text-gray-500',
+        black: 'border border-transparent u-text-white u-bg-gray-800 hover:u-bg-gray-900 focus:u-bg-gray-900',
+        'black-hover': 'border border-transparent u-text-gray-500 hover:u-text-gray-900 focus:u-text-gray-700 bg-transparent hover:bg-white dark:hover:bg-black focus:bg-white dark:focus:bg-black',
+        transparent: 'border border-transparent u-text-gray-500 hover:u-text-gray-700 focus:u-text-gray-700 disabled:hover:u-text-gray-500',
         link: 'border border-transparent text-primary-500 hover:text-primary-700 focus:text-primary-700',
         gradient: 'shadow-sm text-white border border-transparent bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700',
         custom: ''
diff --git a/src/components/elements/Dropdown.vue b/src/components/elements/Dropdown.vue
index 647a1fc7..32847133 100644
--- a/src/components/elements/Dropdown.vue
+++ b/src/components/elements/Dropdown.vue
@@ -76,7 +76,7 @@ export default {
     },
     itemsClass: {
       type: String,
-      default: 'bg-white divide-y divide-gray-100 dark:divide-gray-700 rounded-md ring-1 ring-black ring-opacity-5'
+      default: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 ring-black ring-opacity-5'
     },
     itemClass: {
       type: String,
@@ -84,11 +84,11 @@ export default {
     },
     itemActiveClass: {
       type: String,
-      default: 'bg-tw-gray-100 text-tw-gray-900'
+      default: 'u-bg-gray-100 u-text-gray-900'
     },
     itemInactiveClass: {
       type: String,
-      default: 'text-tw-gray-700'
+      default: 'u-text-gray-700'
     },
     itemDisabledClass: {
       type: String,
@@ -96,7 +96,7 @@ export default {
     },
     itemIconClass: {
       type: String,
-      default: 'mr-3 h-5 w-5 text-tw-gray-400 group-hover:text-tw-gray-500'
+      default: 'mr-3 h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500'
     }
   },
   setup (props) {
diff --git a/src/components/elements/Toggle.vue b/src/components/elements/Toggle.vue
index 860d742c..ffec27a0 100644
--- a/src/components/elements/Toggle.vue
+++ b/src/components/elements/Toggle.vue
@@ -1,11 +1,11 @@
 <template>
   <Switch
     v-model="enabled"
-    :class="[enabled ? 'bg-primary-600' : 'bg-tw-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-200']"
+    :class="[enabled ? 'bg-primary-600' : 'u-bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-200']"
   >
     <span :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']">
       <span :class="[enabled ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity']" aria-hidden="true">
-        <Icon :name="iconOff" class="h-3 w-3 text-tw-gray-400" />
+        <Icon :name="iconOff" class="h-3 w-3 u-text-gray-400" />
       </span>
       <span :class="[enabled ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100', 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity']" aria-hidden="true">
         <Icon :name="iconOn" class="h-3 w-3 text-primary-600" />
diff --git a/src/components/forms/Checkbox.vue b/src/components/forms/Checkbox.vue
index 3f9fbfeb..c3a34447 100644
--- a/src/components/forms/Checkbox.vue
+++ b/src/components/forms/Checkbox.vue
@@ -16,11 +16,11 @@
       >
     </div>
     <div v-if="label" class="ml-3 text-sm">
-      <label :for="name" class="font-medium text-tw-gray-700">
+      <label :for="name" class="font-medium u-text-gray-700">
         {{ label }}
         <span v-if="required" class="text-red-400">*</span>
       </label>
-      <p v-if="help" class="text-tw-gray-500">
+      <p v-if="help" class="u-text-gray-500">
         {{ help }}
       </p>
     </div>
@@ -68,7 +68,7 @@ export default {
     },
     baseClass: {
       type: String,
-      default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 border-tw-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
+      default: 'h-4 w-4 text-primary-600 focus:ring-primary-500 u-border-gray-300 bg-white dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed rounded'
     },
     customClass: {
       type: String,
diff --git a/src/components/forms/Input.vue b/src/components/forms/Input.vue
index 163b88aa..7fad081d 100644
--- a/src/components/forms/Input.vue
+++ b/src/components/forms/Input.vue
@@ -6,7 +6,7 @@
     >
       <Icon
         :name="iconName"
-        class="text-tw-gray-400"
+        class="u-text-gray-400"
         :class="iconClass"
       />
     </div>
@@ -34,7 +34,7 @@
     >
       <Icon
         :name="iconName"
-        class="text-tw-gray-400"
+        class="u-text-gray-400"
         :class="iconClass"
       />
     </div>
@@ -119,7 +119,7 @@ export default {
     },
     baseClass: {
       type: String,
-      default: 'block w-full bg-tw-white text-tw-gray-700 disabled:cursor-not-allowed disabled:bg-tw-gray-50 focus:outline-none'
+      default: 'block w-full u-bg-white u-text-gray-700 disabled:cursor-not-allowed disabled:u-bg-gray-50 focus:outline-none'
     },
     customClass: {
       type: String,
@@ -176,7 +176,7 @@ export default {
     })[props.size])
 
     const appearanceClass = computed(() => ({
-      default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm',
+      default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
       none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
     })[props.appearance])
 
diff --git a/src/components/forms/InputGroup.vue b/src/components/forms/InputGroup.vue
index 8be4d5c4..84f5325d 100644
--- a/src/components/forms/InputGroup.vue
+++ b/src/components/forms/InputGroup.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    :class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-tw-gray-200': inline }"
+    :class="{ 'sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:u-border-gray-200': inline }"
   >
     <slot name="label">
       <div :class="{ 'flex content-center justify-between': !inline }">
         <label
           v-if="label"
           :for="name"
-          class="block text-sm font-medium leading-5 text-tw-gray-700"
+          class="block text-sm font-medium leading-5 u-text-gray-700"
           :class="{'sm:mt-px sm:pt-2': inline }"
         >
           {{ label }}
@@ -15,7 +15,7 @@
         </label>
         <span
           v-if="$slots.hint || hint"
-          class="text-sm leading-5 text-tw-gray-500"
+          class="text-sm leading-5 u-text-gray-500"
           :class="{ 'mt-1 max-w-2xl': inline }"
         ><slot name="hint">{{ hint }}</slot></span>
       </div>
@@ -24,7 +24,7 @@
       :class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
     >
       <slot />
-      <p v-if="help" class="mt-2 text-sm text-tw-gray-500">
+      <p v-if="help" class="mt-2 text-sm u-text-gray-500">
         {{ help }}
       </p>
     </div>
diff --git a/src/components/forms/Radio.vue b/src/components/forms/Radio.vue
index 7c1174d9..05ee93d0 100644
--- a/src/components/forms/Radio.vue
+++ b/src/components/forms/Radio.vue
@@ -14,11 +14,11 @@
       @change="onChange"
     >
     <div v-if="label" class="flex flex-col ml-3">
-      <span class="block text-sm font-medium text-tw-gray-900">
+      <span class="block text-sm font-medium u-text-gray-900">
         {{ label }}
         <span v-if="required" class="text-red-400">*</span>
       </span>
-      <span v-if="help" class="block text-sm text-tw-gray-500">{{ help }}</span>
+      <span v-if="help" class="block text-sm u-text-gray-500">{{ help }}</span>
     </div>
   </label>
 </template>
@@ -60,7 +60,7 @@ export default {
     },
     baseClass: {
       type: String,
-      default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 border-tw-gray-300 bg-tw-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
+      default: 'h-4 w-4 mt-0.5 text-primary-600 checked:border-primary-600 u-border-gray-300 u-bg-white dark:checked:bg-primary-600 focus:ring-offset-white dark:focus:ring-offset-gray-900 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
     },
     customClass: {
       type: String,
diff --git a/src/components/forms/Select.vue b/src/components/forms/Select.vue
index b8801b53..3657fa8c 100644
--- a/src/components/forms/Select.vue
+++ b/src/components/forms/Select.vue
@@ -90,7 +90,7 @@ export default {
     },
     baseClass: {
       type: String,
-      default: 'block w-full disabled:cursor-not-allowed bg-tw-white text-tw-gray-700 disabled:bg-tw-gray-50 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm focus:outline-none'
+      default: 'block w-full disabled:cursor-not-allowed u-bg-white u-text-gray-700 disabled:u-bg-gray-50 focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm focus:outline-none'
     },
     customClass: {
       type: String,
diff --git a/src/components/forms/SelectCustom.vue b/src/components/forms/SelectCustom.vue
index 52893b27..c66d2946 100644
--- a/src/components/forms/SelectCustom.vue
+++ b/src/components/forms/SelectCustom.vue
@@ -5,7 +5,7 @@
     <slot :toggle="toggle" :open="open">
       <TwButton
         icon="solid/selector"
-        icon-class="text-tw-gray-400"
+        icon-class="u-text-gray-400"
         trailing
         :size="size"
         :variant="variant"
@@ -16,11 +16,11 @@
         <div v-if="selectedOptions && selectedOptions.length" class="inline-flex w-full px-3 py-2 -my-2 -ml-3 truncate">
           <span v-for="(selectedOption, index) of selectedOptions" :key="index" class="inline-flex items-center pr-2">
             <slot name="label" :option="selectedOption">
-              <span class="text-tw-gray-700">{{ selectedOption[textAttribute] }}</span>
+              <span class="u-text-gray-700">{{ selectedOption[textAttribute] }}</span>
             </slot>
           </span>
         </div>
-        <div v-else class="inline-flex w-full text-tw-gray-400">
+        <div v-else class="inline-flex w-full u-text-gray-400">
           {{ placeholder || '' }}
         </div>
       </TwButton>
@@ -34,8 +34,8 @@
       leave-active-class="transition duration-100 ease-in"
       leave-to-class="opacity-0"
     >
-      <div v-show="open" ref="tooltip" class="z-10 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-gray-200 dark:ring-gray-700" :class="dropdownClass">
-        <div v-if="searchable" class="w-full border-b border-gray-200 dark:border-gray-700">
+      <div v-show="open" ref="tooltip" class="z-10 overflow-hidden bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 u-ring-gray-200" :class="dropdownClass">
+        <div v-if="searchable" class="w-full border-b u-border-gray-200">
           <TwInput
             ref="search"
             v-model="q"
@@ -60,7 +60,7 @@
             class="relative pl-3 pr-12 cursor-default select-none group hover:text-white hover:bg-primary-600"
             :class="{
               'bg-primary-600 text-white': active === -1,
-              'text-tw-gray-900': active !== -1,
+              'u-text-gray-900': active !== -1,
               'py-2': dropdownSize === 'md',
               'py-1 text-sm': dropdownSize === 'sm'
             }"
@@ -80,7 +80,7 @@
             :class="{
               'font-semibold': isOptionSelected(option),
               'bg-primary-600 text-white': active === index,
-              'text-tw-gray-900': active !== index,
+              'u-text-gray-900': active !== index,
               'py-2': dropdownSize === 'md',
               'py-1 text-sm': dropdownSize === 'sm'
             }"
diff --git a/src/components/forms/Textarea.vue b/src/components/forms/Textarea.vue
index b0bdad71..6e6a43e9 100644
--- a/src/components/forms/Textarea.vue
+++ b/src/components/forms/Textarea.vue
@@ -83,7 +83,7 @@ export default {
     },
     baseClass: {
       type: String,
-      default: 'block w-full bg-tw-white text-tw-gray-700 disabled:cursor-not-allowed disabled:bg-tw-gray-50 focus:outline-none'
+      default: 'block w-full u-bg-white u-text-gray-700 disabled:cursor-not-allowed disabled:u-bg-gray-50 focus:outline-none'
     },
     customClass: {
       type: String,
@@ -146,7 +146,7 @@ export default {
     })[props.size])
 
     const appearanceClass = computed(() => ({
-      default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border border-tw-gray-300 rounded-md shadow-sm',
+      default: 'focus:ring-1 focus:ring-primary-500 focus:border-primary-500 border u-border-gray-300 rounded-md shadow-sm',
       none: 'border-0 bg-transparent focus:ring-0 focus:shadow-none'
     })[props.appearance])
 
diff --git a/src/components/layout/Card.vue b/src/components/layout/Card.vue
index cff99c5e..e1736094 100644
--- a/src/components/layout/Card.vue
+++ b/src/components/layout/Card.vue
@@ -39,7 +39,7 @@ export default {
     },
     backgroundClass: {
       type: String,
-      default: 'bg-tw-white'
+      default: 'u-bg-white'
     },
     shadowClass: {
       type: String,
@@ -47,7 +47,7 @@ export default {
     },
     ringClass: {
       type: String,
-      default: 'ring-1 ring-gray-200 dark:ring-gray-800'
+      default: 'ring-1 u-ring-gray-200'
     },
     bodyClass: {
       type: String,
@@ -75,7 +75,7 @@ export default {
     },
     borderColorClass: {
       type: String,
-      default: 'border-gray-200 dark:border-gray-800'
+      default: 'u-border-gray-200'
     }
   }
 }
diff --git a/src/components/navigation/Pills.vue b/src/components/navigation/Pills.vue
index 98bdfeb2..aa298f4d 100644
--- a/src/components/navigation/Pills.vue
+++ b/src/components/navigation/Pills.vue
@@ -40,7 +40,7 @@ export default {
     },
     activeClass: {
       type: String,
-      default: 'text-tw-gray-700 hover:text-tw-gray-700 focus:text-tw-gray-700'
+      default: 'u-text-gray-700 hover:u-text-gray-700 focus:u-text-gray-700'
     }
   },
   computed: {
diff --git a/src/components/navigation/Tabs.vue b/src/components/navigation/Tabs.vue
index a56bbdb2..f1972d21 100644
--- a/src/components/navigation/Tabs.vue
+++ b/src/components/navigation/Tabs.vue
@@ -28,11 +28,11 @@ export default {
     },
     activeClass: {
       type: String,
-      default: 'border-black dark:border-white text-black dark:text-white hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white'
+      default: 'u-border-black u-text-black hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white'
     },
     inactiveClass: {
       type: String,
-      default: 'border-transparent text-tw-gray-500 hover:text-tw-gray-700 hover:border-tw-gray-300'
+      default: 'border-transparent u-text-gray-500 hover:u-text-gray-700 hover:u-border-gray-300'
     }
   }
 }
diff --git a/src/components/navigation/VerticalNavigation.vue b/src/components/navigation/VerticalNavigation.vue
index 4aa97802..374785e9 100644
--- a/src/components/navigation/VerticalNavigation.vue
+++ b/src/components/navigation/VerticalNavigation.vue
@@ -2,7 +2,7 @@
   <nav>
     <h3
       v-if="title || $slots.title"
-      class="flex items-center justify-between px-2 mb-1 text-xs font-semibold tracking-wider uppercase text-tw-gray-500"
+      class="flex items-center justify-between px-2 mb-1 text-xs font-semibold tracking-wider uppercase u-text-gray-500"
     >
       <slot name="title">
         {{ title }}
@@ -34,7 +34,7 @@
           <span class="truncate">{{ link.label }}</span>
         </slot>
         <div v-if="link.shortcuts" class="hidden ml-3 space-x-1 lg:flex">
-          <span v-for="shortcut of link.shortcuts" :key="shortcut" class="flex items-center justify-center w-4 h-4 font-normal bg-gray-200 rounded text-xxs dark:bg-gray-700 text-tw-gray-600">
+          <span v-for="shortcut of link.shortcuts" :key="shortcut" class="flex items-center justify-center w-4 h-4 font-normal bg-gray-200 rounded text-xxs dark:bg-gray-700 u-text-gray-600">
             {{ shortcut }}
           </span>
         </div>
@@ -44,8 +44,8 @@
               v-if="link.badge"
               class="ml-auto inline-block py-0.5 px-3 text-xs rounded-full"
               :class="{
-                'bg-tw-gray-50': isActive,
-                'bg-gray-200 dark:bg-gray-700 text-tw-gray-600': !isActive
+                'u-bg-gray-50': isActive,
+                'bg-gray-200 dark:bg-gray-700 u-text-gray-600': !isActive
               }"
             >
               {{ link.badge }}
@@ -89,26 +89,26 @@ export default {
     },
     variantClass () {
       return ({
-        white: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50',
-        gray: 'text-tw-gray-600 hover:text-tw-gray-900 hover:bg-tw-gray-50 focus:bg-tw-gray-50'
+        white: 'u-text-gray-600 hover:u-text-gray-900 hover:u-bg-gray-50 focus:u-bg-gray-50',
+        gray: 'u-text-gray-600 hover:u-text-gray-900 hover:u-bg-gray-50 focus:u-bg-gray-50'
       })[this.variant]
     },
     activeVariantClass () {
       return ({
-        white: 'text-tw-gray-900 bg-tw-gray-100 hover:text-tw-gray-900 hover:bg-tw-gray-100 focus:bg-tw-gray-100',
-        gray: 'text-tw-gray-900 bg-gray-200 dark:bg-gray-800 hover:text-tw-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 focus:bg-gray-200 dark:focus:bg-gray-800'
+        white: 'u-text-gray-900 u-bg-gray-100 hover:u-text-gray-900 hover:u-bg-gray-100 focus:u-bg-gray-100',
+        gray: 'u-text-gray-900 bg-gray-200 dark:bg-gray-800 hover:u-text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 focus:bg-gray-200 dark:focus:bg-gray-800'
       })[this.variant]
     },
     iconClass () {
       return ({
-        white: 'text-tw-gray-400 group-hover:text-tw-gray-500',
-        gray: 'text-tw-gray-400 group-hover:text-tw-gray-500'
+        white: 'u-text-gray-400 group-hover:u-text-gray-500',
+        gray: 'u-text-gray-400 group-hover:u-text-gray-500'
       })[this.variant]
     },
     activeIconClass () {
       return ({
-        white: 'text-tw-gray-500 group-hover:text-tw-gray-500',
-        gray: 'text-tw-gray-500 group-hover:text-tw-gray-500'
+        white: 'u-text-gray-500 group-hover:u-text-gray-500',
+        gray: 'u-text-gray-500 group-hover:u-text-gray-500'
       })[this.variant]
     }
   },
diff --git a/src/components/overlays/Modal.vue b/src/components/overlays/Modal.vue
index 30423ab7..9ce65ad4 100644
--- a/src/components/overlays/Modal.vue
+++ b/src/components/overlays/Modal.vue
@@ -30,7 +30,7 @@
             <Card
               class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
               v-bind="$attrs"
-              ring-class="sm:ring-1 sm:ring-transparent dark:ring-gray-700"
+              ring-class
             >
               <template v-if="$slots.header" #header>
                 <slot name="header" />
diff --git a/src/components/overlays/Notification.vue b/src/components/overlays/Notification.vue
index e697faef..6c3add9d 100644
--- a/src/components/overlays/Notification.vue
+++ b/src/components/overlays/Notification.vue
@@ -13,17 +13,17 @@
       @mouseover="onMouseover"
       @mouseout="onMouseout"
     >
-      <div class="relative overflow-hidden rounded-lg ring-1 ring-gray-200 dark:ring-gray-700">
+      <div class="relative overflow-hidden rounded-lg ring-1 u-ring-gray-200">
         <div class="p-4">
           <div class="flex">
             <div class="flex-shrink-0">
               <Icon :name="iconName" class="w-6 h-6" :class="iconClass" />
             </div>
             <div class="ml-3 w-0 flex-1 pt-0.5">
-              <p class="text-sm font-medium leading-5 text-tw-gray-900">
+              <p class="text-sm font-medium leading-5 u-text-gray-900">
                 {{ title }}
               </p>
-              <p v-if="description" class="mt-1 text-sm leading-5 text-tw-gray-500">
+              <p v-if="description" class="mt-1 text-sm leading-5 u-text-gray-500">
                 {{ description }}
               </p>
               <Button
@@ -34,8 +34,8 @@
                 @click.native.stop="cancel"
               >
                 Undo
-                <div class="inline-flex items-center rounded bg-tw-gray-200 ml-1.5">
-                  <span class="w-full px-1 text-center text-tw-gray-600 text-xxs">
+                <div class="inline-flex items-center rounded u-bg-gray-200 ml-1.5">
+                  <span class="w-full px-1 text-center u-text-gray-600 text-xxs">
                     Z
                   </span>
                 </div>
@@ -43,7 +43,7 @@
             </div>
             <div class="flex-shrink-0 ml-4">
               <button
-                class="transition duration-150 ease-in-out text-tw-gray-400 focus:outline-none hover:text-tw-gray-500 focus:text-tw-gray-500"
+                class="transition duration-150 ease-in-out u-text-gray-400 focus:outline-none hover:u-text-gray-500 focus:u-text-gray-500"
                 @click.stop="close"
               >
                 <span class="sr-only">Close</span>
@@ -129,7 +129,7 @@ export default {
         info: 'text-blue-400',
         success: 'text-green-400',
         error: 'text-red-400'
-      })[this.type] || 'text-tw-gray-400'
+      })[this.type] || 'u-text-gray-400'
     },
     progressBarStyle () {
       const remainingPercent = this.remainingTime / this.timeout * 100
diff --git a/src/components/overlays/Slideover.vue b/src/components/overlays/Slideover.vue
index 2ae22740..3b5abeff 100644
--- a/src/components/overlays/Slideover.vue
+++ b/src/components/overlays/Slideover.vue
@@ -38,14 +38,14 @@
             </template>
             <template v-else-if="title" #header>
               <div class="flex items-center justify-between">
-                <h2 class="font-medium sm:leading-6 sm:text-lg text-tw-gray-900">
+                <h2 class="font-medium sm:leading-6 sm:text-lg u-text-gray-900">
                   {{ title }}
                 </h2>
                 <div class="flex items-center">
                   <button
                     type="button"
                     aria-label="Close panel"
-                    class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    class="rounded-md u-text-gray-400 hover:u-text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
                     @click="open = false"
                   >
                     <Icon name="outline/x" class="w-6 h-6" />
diff --git a/src/index.ts b/src/index.ts
index b3534bd5..8786368c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -59,57 +59,63 @@ export default defineNuxtModule<UiOptions>({
         prefix: ''
       },
       shortcuts: {
-        'bg-tw-white': 'bg-white dark:bg-black',
-        'bg-tw-gray-50': 'bg-gray-50 dark:bg-gray-900',
-        'bg-tw-gray-100': 'bg-gray-100 dark:bg-gray-800',
-        'bg-tw-gray-200': 'bg-gray-200 dark:bg-gray-700',
-        'bg-tw-gray-300': 'bg-gray-300 dark:bg-gray-600',
-        'bg-tw-gray-400': 'bg-gray-400 dark:bg-gray-500',
-        'bg-tw-gray-500': 'bg-gray-500 dark:bg-gray-400',
-        'bg-tw-gray-600': 'bg-gray-600 dark:bg-gray-300',
-        'bg-tw-gray-700': 'bg-gray-700 dark:bg-gray-200',
-        'bg-tw-gray-800': 'bg-gray-800 dark:bg-gray-100',
-        'bg-tw-gray-900': 'bg-gray-900 dark:bg-gray-50',
-        'bg-tw-black': 'bg-black dark:bg-white',
-        'text-tw-white': 'text-white dark:text-black',
-        'text-tw-gray-50': 'text-gray-50 dark:text-gray-900',
-        'text-tw-gray-100': 'text-gray-100 dark:text-gray-800',
-        'text-tw-gray-200': 'text-gray-200 dark:text-gray-700',
-        'text-tw-gray-300': 'text-gray-300 dark:text-gray-600',
-        'text-tw-gray-400': 'text-gray-400 dark:text-gray-500',
-        'text-tw-gray-500': 'text-gray-500 dark:text-gray-400',
-        'text-tw-gray-600': 'text-gray-600 dark:text-gray-300',
-        'text-tw-gray-700': 'text-gray-700 dark:text-gray-200',
-        'text-tw-gray-800': 'text-gray-800 dark:text-gray-100',
-        'text-tw-gray-900': 'text-gray-900 dark:text-gray-50',
-        'text-tw-black': 'text-black dark:text-white',
-        'border-tw-gray-100': 'border-gray-100 dark:border-gray-900',
-        'border-tw-gray-200': 'border-gray-200 dark:border-gray-800',
-        'border-tw-gray-300': 'border-gray-300 dark:border-gray-700',
-        'border-tw-gray-400': 'border-gray-400 dark:border-gray-600',
-        'border-tw-gray-500': 'border-gray-500 dark:border-gray-500',
-        'border-tw-gray-600': 'border-gray-600 dark:border-gray-400',
-        'border-tw-gray-700': 'border-gray-700 dark:border-gray-300',
-        'border-tw-gray-800': 'border-gray-800 dark:border-gray-200',
-        'border-tw-gray-900': 'border-gray-900 dark:border-gray-100',
-        'divide-tw-gray-100': 'divide-gray-100 dark:divide-gray-900',
-        'divide-tw-gray-200': 'divide-gray-200 dark:divide-gray-800',
-        'divide-tw-gray-300': 'divide-gray-300 dark:divide-gray-700',
-        'divide-tw-gray-400': 'divide-gray-400 dark:divide-gray-600',
-        'divide-tw-gray-500': 'divide-gray-500 dark:divide-gray-500',
-        'divide-tw-gray-600': 'divide-gray-600 dark:divide-gray-400',
-        'divide-tw-gray-700': 'divide-gray-700 dark:divide-gray-300',
-        'divide-tw-gray-800': 'divide-gray-800 dark:divide-gray-200',
-        'divide-tw-gray-900': 'divide-gray-900 dark:divide-gray-100',
-        'ring-tw-gray-100': 'ring-gray-100 dark:ring-gray-900',
-        'ring-tw-gray-200': 'ring-gray-200 dark:ring-gray-800',
-        'ring-tw-gray-300': 'ring-gray-300 dark:ring-gray-700',
-        'ring-tw-gray-400': 'ring-gray-400 dark:ring-gray-600',
-        'ring-tw-gray-500': 'ring-gray-500 dark:ring-gray-500',
-        'ring-tw-gray-600': 'ring-gray-600 dark:ring-gray-400',
-        'ring-tw-gray-700': 'ring-gray-700 dark:ring-gray-300',
-        'ring-tw-gray-800': 'ring-gray-800 dark:ring-gray-200',
-        'ring-tw-gray-900': 'ring-gray-900 dark:ring-gray-100',
+        [`${prefix}-bg-white`]: 'bg-white dark:bg-black',
+        [`${prefix}-bg-gray-50`]: 'bg-gray-50 dark:bg-gray-900',
+        [`${prefix}-bg-gray-100`]: 'bg-gray-100 dark:bg-gray-800',
+        [`${prefix}-bg-gray-200`]: 'bg-gray-200 dark:bg-gray-700',
+        [`${prefix}-bg-gray-300`]: 'bg-gray-300 dark:bg-gray-600',
+        [`${prefix}-bg-gray-400`]: 'bg-gray-400 dark:bg-gray-500',
+        [`${prefix}-bg-gray-500`]: 'bg-gray-500 dark:bg-gray-400',
+        [`${prefix}-bg-gray-600`]: 'bg-gray-600 dark:bg-gray-300',
+        [`${prefix}-bg-gray-700`]: 'bg-gray-700 dark:bg-gray-200',
+        [`${prefix}-bg-gray-800`]: 'bg-gray-800 dark:bg-gray-100',
+        [`${prefix}-bg-gray-900`]: 'bg-gray-900 dark:bg-gray-50',
+        [`${prefix}-bg-black`]: 'bg-black dark:bg-white',
+        [`${prefix}-text-white`]: 'text-white dark:text-black',
+        [`${prefix}-text-gray-50`]: 'text-gray-50 dark:text-gray-900',
+        [`${prefix}-text-gray-100`]: 'text-gray-100 dark:text-gray-800',
+        [`${prefix}-text-gray-200`]: 'text-gray-200 dark:text-gray-700',
+        [`${prefix}-text-gray-300`]: 'text-gray-300 dark:text-gray-600',
+        [`${prefix}-text-gray-400`]: 'text-gray-400 dark:text-gray-500',
+        [`${prefix}-text-gray-500`]: 'text-gray-500 dark:text-gray-400',
+        [`${prefix}-text-gray-600`]: 'text-gray-600 dark:text-gray-300',
+        [`${prefix}-text-gray-700`]: 'text-gray-700 dark:text-gray-200',
+        [`${prefix}-text-gray-800`]: 'text-gray-800 dark:text-gray-100',
+        [`${prefix}-text-gray-900`]: 'text-gray-900 dark:text-gray-50',
+        [`${prefix}-text-black`]: 'text-black dark:text-white',
+        [`${prefix}-border-white`]: 'border-white dark:border-black',
+        [`${prefix}-border-gray-100`]: 'border-gray-100 dark:border-gray-900',
+        [`${prefix}-border-gray-200`]: 'border-gray-200 dark:border-gray-800',
+        [`${prefix}-border-gray-300`]: 'border-gray-300 dark:border-gray-700',
+        [`${prefix}-border-gray-400`]: 'border-gray-400 dark:border-gray-600',
+        [`${prefix}-border-gray-500`]: 'border-gray-500 dark:border-gray-500',
+        [`${prefix}-border-gray-600`]: 'border-gray-600 dark:border-gray-400',
+        [`${prefix}-border-gray-700`]: 'border-gray-700 dark:border-gray-300',
+        [`${prefix}-border-gray-800`]: 'border-gray-800 dark:border-gray-200',
+        [`${prefix}-border-gray-900`]: 'border-gray-900 dark:border-gray-100',
+        [`${prefix}-border-black`]: 'border-black dark:border-white',
+        [`${prefix}-divide-white`]: 'divide-white dark:divide-black',
+        [`${prefix}-divide-gray-100`]: 'divide-gray-100 dark:divide-gray-900',
+        [`${prefix}-divide-gray-200`]: 'divide-gray-200 dark:divide-gray-800',
+        [`${prefix}-divide-gray-300`]: 'divide-gray-300 dark:divide-gray-700',
+        [`${prefix}-divide-gray-400`]: 'divide-gray-400 dark:divide-gray-600',
+        [`${prefix}-divide-gray-500`]: 'divide-gray-500 dark:divide-gray-500',
+        [`${prefix}-divide-gray-600`]: 'divide-gray-600 dark:divide-gray-400',
+        [`${prefix}-divide-gray-700`]: 'divide-gray-700 dark:divide-gray-300',
+        [`${prefix}-divide-gray-800`]: 'divide-gray-800 dark:divide-gray-200',
+        [`${prefix}-divide-gray-900`]: 'divide-gray-900 dark:divide-gray-100',
+        [`${prefix}-divide-black`]: 'divide-black dark:divide-white',
+        [`${prefix}-ring-white`]: 'ring-white dark:ring-black',
+        [`${prefix}-ring-gray-100`]: 'ring-gray-100 dark:ring-gray-900',
+        [`${prefix}-ring-gray-200`]: 'ring-gray-200 dark:ring-gray-800',
+        [`${prefix}-ring-gray-300`]: 'ring-gray-300 dark:ring-gray-700',
+        [`${prefix}-ring-gray-400`]: 'ring-gray-400 dark:ring-gray-600',
+        [`${prefix}-ring-gray-500`]: 'ring-gray-500 dark:ring-gray-500',
+        [`${prefix}-ring-gray-600`]: 'ring-gray-600 dark:ring-gray-400',
+        [`${prefix}-ring-gray-700`]: 'ring-gray-700 dark:ring-gray-300',
+        [`${prefix}-ring-gray-800`]: 'ring-gray-800 dark:ring-gray-200',
+        [`${prefix}-ring-gray-900`]: 'ring-gray-900 dark:ring-gray-100',
+        [`${prefix}-ring-black`]: 'ring-black dark:ring-white',
         ...shortcuts
       },
       rules: [