From c28913dbc649391c3a56802fa258e96fe03feb8c Mon Sep 17 00:00:00 2001
From: Aditya Mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Sun, 26 May 2024 07:37:00 +0530
Subject: [PATCH] remove duplicate tailwind config and use single config
 (#10237)

* remove duplicate tailwind config and use single config

* format files

---------

Co-authored-by: Daniel Belmes <3631206+DanielBelmes@users.noreply.github.com>
Co-authored-by: Daniel Belmes <danielbelmes@ymail.com>
---
 .../client-core/src/admin/adminRoutes.tsx     |  8 +-
 .../admin/components/avatar/AvatarTable.tsx   |  4 +-
 .../admin/components/channel/ChannelTable.tsx |  4 +-
 .../components/instance/InstanceTable.tsx     |  4 +-
 .../admin/components/invites/InviteTable.tsx  |  2 +-
 .../components/locations/LocationTable.tsx    |  4 +-
 .../project/AddEditProjectModal.tsx           |  2 +-
 .../admin/components/project/ProjectTable.tsx | 12 +--
 .../components/project/UpdateEngineModal.tsx  |  4 +-
 .../components/recordings/RecordingsTable.tsx |  2 +-
 .../components/resources/ResourceTable.tsx    |  8 +-
 .../admin/components/server/ServerTable.tsx   |  2 +-
 .../src/admin/components/server/index.tsx     |  6 +-
 .../settings/tabs/authentication.tsx          |  6 +-
 .../admin/components/settings/tabs/aws.tsx    |  2 +-
 .../admin/components/settings/tabs/client.tsx |  2 +-
 .../admin/components/settings/tabs/email.tsx  |  2 +-
 .../admin/components/settings/tabs/helm.tsx   |  2 +-
 .../components/settings/tabs/project.tsx      |  2 +-
 .../admin/components/settings/tabs/server.tsx |  2 +-
 .../src/admin/components/user/UserTable.tsx   |  4 +-
 packages/client-core/tailwind.config.js       | 76 -------------------
 packages/client/src/pages/_app_tw.tsx         |  2 +-
 packages/client/tailwind.config.js            | 53 +------------
 .../primitives/tailwind/Accordion/index.tsx   |  4 +-
 .../src/primitives/tailwind/Input/index.tsx   |  8 +-
 .../src/primitives/tailwind/Label/index.tsx   |  2 +-
 .../src/primitives/tailwind/Modal/index.tsx   |  6 +-
 .../tailwind/MultiEmailInput/index.tsx        |  4 +-
 .../primitives/tailwind/MultiSelect/index.tsx | 16 ++--
 .../primitives/tailwind/Progress/index.tsx    |  2 +-
 .../src/primitives/tailwind/Radio/index.tsx   |  4 +-
 .../src/primitives/tailwind/Select/index.tsx  |  6 +-
 .../src/primitives/tailwind/Table/index.tsx   |  8 +-
 .../ui/src/primitives/tailwind/Tabs/index.tsx |  4 +-
 .../src/primitives/tailwind/Toggle/index.tsx  |  2 +-
 .../tailwind.config.js => tailwind.config.js  |  1 -
 37 files changed, 79 insertions(+), 203 deletions(-)
 delete mode 100644 packages/client-core/tailwind.config.js
 rename packages/ui/tailwind.config.js => tailwind.config.js (99%)

diff --git a/packages/client-core/src/admin/adminRoutes.tsx b/packages/client-core/src/admin/adminRoutes.tsx
index 4fc8c5fa31..1c6f9e6452 100644
--- a/packages/client-core/src/admin/adminRoutes.tsx
+++ b/packages/client-core/src/admin/adminRoutes.tsx
@@ -55,7 +55,7 @@ const AdminTopBar = () => {
   }
 
   return (
-    <div className="bg-theme-surface-main flex h-16 w-full items-center justify-between px-8 py-4">
+    <div className="flex h-16 w-full items-center justify-between bg-theme-surface-main px-8 py-4">
       <img src="static/etherealengine_logo.png" alt="iR Engine Logo" className="h-7 w-7" />
       <div className="">
         <Button onClick={toggleTheme} className="pointer-events-auto bg-transparent p-0">
@@ -80,7 +80,7 @@ const AdminSideBar = () => {
   const relativePath = fullPathName.split('/').slice(2).join('/')
 
   return (
-    <aside className="bg-theme-surface-main mx-8 h-fit max-h-[calc(100vh_-_88px_-_4rem)] overflow-y-auto overflow-x-hidden rounded-2xl px-2 py-4">
+    <aside className="mx-8 h-fit max-h-[calc(100vh_-_88px_-_4rem)] overflow-y-auto overflow-x-hidden rounded-2xl bg-theme-surface-main px-2 py-4">
       <ul className="space-y-2">
         {Object.entries(allowedRoutes)
           .filter(([_, sidebarItem]) => sidebarItem.access)
@@ -89,9 +89,9 @@ const AdminSideBar = () => {
               <li key={index}>
                 <Link to={path}>
                   <Button
-                    className={`hover:bg-theme-highlight] text-theme-secondary flex w-72 items-center justify-start rounded-xl px-2 py-3 font-medium ${
+                    className={`hover:bg-theme-highlight] flex w-72 items-center justify-start rounded-xl px-2 py-3 font-medium text-theme-secondary ${
                       relativePath === path
-                        ? 'bg-theme-highlight text-theme-primary font-semibold '
+                        ? 'bg-theme-highlight font-semibold text-theme-primary '
                         : 'bg-theme-surface-main'
                     }`}
                     startIcon={sidebarItem.icon}
diff --git a/packages/client-core/src/admin/components/avatar/AvatarTable.tsx b/packages/client-core/src/admin/components/avatar/AvatarTable.tsx
index 7c3d3a8910..b0cc5d1ba1 100644
--- a/packages/client-core/src/admin/components/avatar/AvatarTable.tsx
+++ b/packages/client-core/src/admin/components/avatar/AvatarTable.tsx
@@ -113,7 +113,7 @@ export default function AvatarTable({ search }: { search: string }) {
             title={t('admin:components.common.view')}
             onClick={() => PopoverState.showPopupover(<AddEditAvatarModal avatar={row} />)}
           >
-            <HiPencil className="text-theme-iconGreen place-self-center" />
+            <HiPencil className="place-self-center text-theme-iconGreen" />
           </Button>
           <Button
             rounded="full"
@@ -131,7 +131,7 @@ export default function AvatarTable({ search }: { search: string }) {
               )
             }}
           >
-            <HiTrash className="text-theme-iconRed place-self-center" />
+            <HiTrash className="place-self-center text-theme-iconRed" />
           </Button>
         </div>
       )
diff --git a/packages/client-core/src/admin/components/channel/ChannelTable.tsx b/packages/client-core/src/admin/components/channel/ChannelTable.tsx
index fcebbbfa4a..1cd20d61ff 100644
--- a/packages/client-core/src/admin/components/channel/ChannelTable.tsx
+++ b/packages/client-core/src/admin/components/channel/ChannelTable.tsx
@@ -100,7 +100,7 @@ export default function ChannelTable({
             title={t('admin:components.common.view')}
             onClick={() => PopoverState.showPopupover(<AddEditChannelModal channel={row} />)}
           >
-            <HiPencil className="text-theme-iconGreen place-self-center" />
+            <HiPencil className="place-self-center text-theme-iconGreen" />
           </Button>
           <Button
             rounded="full"
@@ -118,7 +118,7 @@ export default function ChannelTable({
               )
             }
           >
-            <HiTrash className="text-theme-iconRed place-self-center" />
+            <HiTrash className="place-self-center text-theme-iconRed" />
           </Button>
         </div>
       )
diff --git a/packages/client-core/src/admin/components/instance/InstanceTable.tsx b/packages/client-core/src/admin/components/instance/InstanceTable.tsx
index a925cc6c18..41c55c6ef6 100644
--- a/packages/client-core/src/admin/components/instance/InstanceTable.tsx
+++ b/packages/client-core/src/admin/components/instance/InstanceTable.tsx
@@ -94,7 +94,7 @@ export default function InstanceTable({ search }: { search: string }) {
             {t('admin:components.instance.actions.view')}
           </Button>
           <Button
-            className="border-theme-primary h-8 w-8 justify-center border bg-transparent p-0"
+            className="h-8 w-8 justify-center border border-theme-primary bg-transparent p-0"
             rounded="full"
             onClick={() => {
               PopoverState.showPopupover(
@@ -107,7 +107,7 @@ export default function InstanceTable({ search }: { search: string }) {
               )
             }}
           >
-            <HiTrash className="text-theme-iconRed place-self-center" />
+            <HiTrash className="place-self-center text-theme-iconRed" />
           </Button>
         </div>
       )
diff --git a/packages/client-core/src/admin/components/invites/InviteTable.tsx b/packages/client-core/src/admin/components/invites/InviteTable.tsx
index 10cd6f63e5..b80ebace21 100644
--- a/packages/client-core/src/admin/components/invites/InviteTable.tsx
+++ b/packages/client-core/src/admin/components/invites/InviteTable.tsx
@@ -115,7 +115,7 @@ export default function InviteTable({
           </Button>
           <Button
             variant="outline"
-            startIcon={<HiTrash className="text-theme-iconRed place-self-center" />}
+            startIcon={<HiTrash className="place-self-center text-theme-iconRed" />}
             onClick={() => PopoverState.showPopupover(<RemoveInviteModal invites={[row]} />)}
           />
         </div>
diff --git a/packages/client-core/src/admin/components/locations/LocationTable.tsx b/packages/client-core/src/admin/components/locations/LocationTable.tsx
index bfd754fa39..dfd1d7f73c 100644
--- a/packages/client-core/src/admin/components/locations/LocationTable.tsx
+++ b/packages/client-core/src/admin/components/locations/LocationTable.tsx
@@ -98,7 +98,7 @@ export default function LocationTable({ search }: { search: string }) {
             title={t('admin:components.common.view')}
             onClick={() => PopoverState.showPopupover(<AddEditLocationModal location={row} />)}
           >
-            <HiPencil className="text-theme-iconGreen place-self-center" />
+            <HiPencil className="place-self-center text-theme-iconGreen" />
           </Button>
           <Button
             rounded="full"
@@ -116,7 +116,7 @@ export default function LocationTable({ search }: { search: string }) {
               )
             }
           >
-            <HiTrash className="text-theme-iconRed place-self-center" />
+            <HiTrash className="place-self-center text-theme-iconRed" />
           </Button>
         </div>
       )
diff --git a/packages/client-core/src/admin/components/project/AddEditProjectModal.tsx b/packages/client-core/src/admin/components/project/AddEditProjectModal.tsx
index 7aececa106..cde67234ab 100644
--- a/packages/client-core/src/admin/components/project/AddEditProjectModal.tsx
+++ b/packages/client-core/src/admin/components/project/AddEditProjectModal.tsx
@@ -522,7 +522,7 @@ export default function AddEditProjectModal({
           projectUpdateStatus.value?.selectedSHA.length > 0 &&
           projectUpdateStatus.value?.commitData.length > 0 &&
           !matchesEngineVersion && (
-            <div className="bg-theme-bannerInformative flex items-center justify-center gap-3 rounded-lg p-4">
+            <div className="flex items-center justify-center gap-3 rounded-lg bg-theme-bannerInformative p-4">
               <div>
                 <CiWarning className="h-5 w-5 bg-transparent" />
               </div>
diff --git a/packages/client-core/src/admin/components/project/ProjectTable.tsx b/packages/client-core/src/admin/components/project/ProjectTable.tsx
index e2f6b5ca16..cd7f0639f2 100644
--- a/packages/client-core/src/admin/components/project/ProjectTable.tsx
+++ b/packages/client-core/src/admin/components/project/ProjectTable.tsx
@@ -107,7 +107,7 @@ export default function ProjectTable() {
         <Button
           startIcon={<HiOutlineArrowPath />}
           size="small"
-          className="bg-theme-blue-secondary mr-2 h-min whitespace-pre text-[#214AA6] disabled:opacity-50 dark:text-white"
+          className="mr-2 h-min whitespace-pre bg-theme-blue-secondary text-[#214AA6] disabled:opacity-50 dark:text-white"
           disabled={project.name === 'default-project'}
           onClick={() =>
             PopoverState.showPopupover(
@@ -120,7 +120,7 @@ export default function ProjectTable() {
         <Button
           startIcon={<GrGithub />}
           size="small"
-          className="bg-theme-blue-secondary mr-2 h-min whitespace-pre text-[#214AA6] disabled:opacity-50 dark:text-white"
+          className="mr-2 h-min whitespace-pre bg-theme-blue-secondary text-[#214AA6] disabled:opacity-50 dark:text-white"
           disabled={!project || !project.repositoryPath || project.name === 'default-project'}
           onClick={() => {
             PopoverState.showPopupover(
@@ -141,7 +141,7 @@ export default function ProjectTable() {
         <Button
           startIcon={<HiOutlineUsers />}
           size="small"
-          className="bg-theme-blue-secondary mr-2 h-min whitespace-pre text-[#214AA6] disabled:opacity-50 dark:text-white"
+          className="mr-2 h-min whitespace-pre bg-theme-blue-secondary text-[#214AA6] disabled:opacity-50 dark:text-white"
           onClick={() => {
             activeProjectId.set(project.id)
             PopoverState.showPopupover(
@@ -154,7 +154,7 @@ export default function ProjectTable() {
         <Button
           startIcon={<HiOutlineCommandLine />}
           size="small"
-          className="bg-theme-blue-secondary mr-2 h-min whitespace-pre text-[#214AA6] disabled:opacity-50 dark:text-white"
+          className="mr-2 h-min whitespace-pre bg-theme-blue-secondary text-[#214AA6] disabled:opacity-50 dark:text-white"
           disabled={config.client.localBuildOrDev}
           onClick={() => {
             PopoverState.showPopupover(
@@ -172,14 +172,14 @@ export default function ProjectTable() {
         <Button
           startIcon={<HiOutlineFolder />}
           size="small"
-          className="bg-theme-blue-secondary mr-2 h-min whitespace-pre text-[#214AA6] disabled:opacity-50 dark:text-white"
+          className="mr-2 h-min whitespace-pre bg-theme-blue-secondary text-[#214AA6] disabled:opacity-50 dark:text-white"
         >
           {t('admin:components.common.view')}
         </Button>
         <Button
           startIcon={<HiOutlineTrash />}
           size="small"
-          className="bg-theme-blue-secondary h-min whitespace-pre text-[#214AA6] disabled:opacity-50 dark:text-white"
+          className="h-min whitespace-pre bg-theme-blue-secondary text-[#214AA6] disabled:opacity-50 dark:text-white"
           disabled={project.name === 'default-project'}
           onClick={() => {
             PopoverState.showPopupover(
diff --git a/packages/client-core/src/admin/components/project/UpdateEngineModal.tsx b/packages/client-core/src/admin/components/project/UpdateEngineModal.tsx
index 3d51e41eb3..a2d3f43933 100644
--- a/packages/client-core/src/admin/components/project/UpdateEngineModal.tsx
+++ b/packages/client-core/src/admin/components/project/UpdateEngineModal.tsx
@@ -178,7 +178,7 @@ export default function UpdateEngineModal() {
 
         {updateProjects.value && (
           <>
-            <div className="bg-theme-bannerInformative flex items-center justify-center gap-3 rounded-lg p-4">
+            <div className="flex items-center justify-center gap-3 rounded-lg bg-theme-bannerInformative p-4">
               <div>
                 <LuInfo className="h-5 w-5 bg-transparent" />
               </div>
@@ -188,7 +188,7 @@ export default function UpdateEngineModal() {
               {projectState.projects.value
                 .filter((project) => project.name !== 'default-project' && project.repositoryPath)
                 .map((project) => (
-                  <div key={project.id} className="border-theme-primary bg-theme-surfaceInput border px-3.5 py-5">
+                  <div key={project.id} className="border border-theme-primary bg-theme-surfaceInput px-3.5 py-5">
                     <Checkbox
                       label={project.name}
                       value={projectsToUpdate.value.has(project.name)}
diff --git a/packages/client-core/src/admin/components/recordings/RecordingsTable.tsx b/packages/client-core/src/admin/components/recordings/RecordingsTable.tsx
index 89f4ab2536..debeffaea5 100644
--- a/packages/client-core/src/admin/components/recordings/RecordingsTable.tsx
+++ b/packages/client-core/src/admin/components/recordings/RecordingsTable.tsx
@@ -79,7 +79,7 @@ export default function RecordingsTable({ search }: { search: string }) {
             <HiEye className="place-self-center" />
           </Button> */}
           <Button
-            className="border-theme-primary h-8 w-8 justify-center border bg-transparent p-0"
+            className="h-8 w-8 justify-center border border-theme-primary bg-transparent p-0"
             rounded="full"
             onClick={() => {
               PopoverState.showPopupover(
diff --git a/packages/client-core/src/admin/components/resources/ResourceTable.tsx b/packages/client-core/src/admin/components/resources/ResourceTable.tsx
index e432e09238..1b1ddc3509 100644
--- a/packages/client-core/src/admin/components/resources/ResourceTable.tsx
+++ b/packages/client-core/src/admin/components/resources/ResourceTable.tsx
@@ -75,13 +75,13 @@ export default function ResourceTable({ search }: { search: string }) {
               PopoverState.showPopupover(<AddEditResourceModal selectedResource={el} />)
             }}
             rounded="full"
-            className="border-theme-primary h-8 w-8 justify-center border bg-transparent p-0"
+            className="h-8 w-8 justify-center border border-theme-primary bg-transparent p-0"
           >
-            <HiEye className="text-theme-primary place-self-center" />
+            <HiEye className="place-self-center text-theme-primary" />
           </Button>
           <Button
             rounded="full"
-            className="border-theme-primary h-8 w-8 justify-center border bg-transparent p-0"
+            className="h-8 w-8 justify-center border border-theme-primary bg-transparent p-0"
             onClick={() => {
               PopoverState.showPopupover(
                 <ConfirmDialog
@@ -93,7 +93,7 @@ export default function ResourceTable({ search }: { search: string }) {
               )
             }}
           >
-            <HiTrash className="text-theme-iconRed place-self-center" />
+            <HiTrash className="place-self-center text-theme-iconRed" />
           </Button>
         </div>
       )
diff --git a/packages/client-core/src/admin/components/server/ServerTable.tsx b/packages/client-core/src/admin/components/server/ServerTable.tsx
index 5795cb9219..7663191f09 100644
--- a/packages/client-core/src/admin/components/server/ServerTable.tsx
+++ b/packages/client-core/src/admin/components/server/ServerTable.tsx
@@ -123,7 +123,7 @@ export default function ServerTable({
               )
             }}
           >
-            <HiTrash className="text-theme-iconRed place-self-center" />
+            <HiTrash className="place-self-center text-theme-iconRed" />
           </Button>
         </div>
       )
diff --git a/packages/client-core/src/admin/components/server/index.tsx b/packages/client-core/src/admin/components/server/index.tsx
index 9e0dd5be0f..b23742f7ba 100644
--- a/packages/client-core/src/admin/components/server/index.tsx
+++ b/packages/client-core/src/admin/components/server/index.tsx
@@ -86,14 +86,14 @@ export default function Servers() {
         {serverInfoQuery.data.map((info) => (
           <div
             key={info.id}
-            className={`bg-theme-surface-main flex h-16 w-44 cursor-pointer items-start justify-between rounded-2xl p-4 ${
-              serverType.value === info.id && 'border-b-blue-primary border-b-2'
+            className={`flex h-16 w-44 cursor-pointer items-start justify-between rounded-2xl bg-theme-surface-main p-4 ${
+              serverType.value === info.id && 'border-b-2 border-b-blue-primary'
             }`}
             onClick={() => serverType.set(info.id)}
           >
             <Text fontSize="sm">{info.label}</Text>
             <Badge
-              className="bg-blue-primary h-6 rounded-[90px] text-white"
+              className="h-6 rounded-[90px] bg-blue-primary text-white"
               label={`${info.pods.filter((inf) => inf.status === 'Running').length}/${info.pods.length}`}
             />
           </div>
diff --git a/packages/client-core/src/admin/components/settings/tabs/authentication.tsx b/packages/client-core/src/admin/components/settings/tabs/authentication.tsx
index 9ae888916c..0cbadafae8 100644
--- a/packages/client-core/src/admin/components/settings/tabs/authentication.tsx
+++ b/packages/client-core/src/admin/components/settings/tabs/authentication.tsx
@@ -242,7 +242,7 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
         />
       </div>
 
-      <hr className="border-theme-primary my-6 border" />
+      <hr className="my-6 border border-theme-primary" />
 
       <div className="grid grid-cols-3 gap-4">
         {holdAuth?.discord?.value && (
@@ -330,7 +330,7 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
         )}
 
         {(holdAuth?.discord?.value || holdAuth?.linkedin?.value || holdAuth?.facebook?.value) && (
-          <hr className="border-theme-primary col-span-full my-6 border" />
+          <hr className="col-span-full my-6 border border-theme-primary" />
         )}
 
         {holdAuth?.google?.value && (
@@ -419,7 +419,7 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
       </div>
 
       <div className="mt-6 grid grid-cols-8 gap-6">
-        <Button size="small" className="text-primary bg-theme-highlight col-span-1" onClick={handleCancel} fullWidth>
+        <Button size="small" className="text-primary col-span-1 bg-theme-highlight" onClick={handleCancel} fullWidth>
           {t('admin:components.common.reset')}
         </Button>
 
diff --git a/packages/client-core/src/admin/components/settings/tabs/aws.tsx b/packages/client-core/src/admin/components/settings/tabs/aws.tsx
index 9192058412..db150c43d9 100644
--- a/packages/client-core/src/admin/components/settings/tabs/aws.tsx
+++ b/packages/client-core/src/admin/components/settings/tabs/aws.tsx
@@ -248,7 +248,7 @@ const AwsTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRefObj
       </div>
 
       <div className="grid grid-cols-8 gap-6">
-        <Button size="small" className="text-primary bg-theme-highlight col-span-1" fullWidth onClick={handleCancel}>
+        <Button size="small" className="text-primary col-span-1 bg-theme-highlight" fullWidth onClick={handleCancel}>
           {t('admin:components.common.reset')}
         </Button>
         <Button size="small" variant="primary" className="col-span-1" fullWidth onClick={handleSubmit}>
diff --git a/packages/client-core/src/admin/components/settings/tabs/client.tsx b/packages/client-core/src/admin/components/settings/tabs/client.tsx
index 9f728a1764..a6d6bd40d0 100644
--- a/packages/client-core/src/admin/components/settings/tabs/client.tsx
+++ b/packages/client-core/src/admin/components/settings/tabs/client.tsx
@@ -407,7 +407,7 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
       </div>
 
       <div className="mt-6 grid grid-cols-8 gap-6">
-        <Button size="small" className="text-primary bg-theme-highlight col-span-1" onClick={handleCancel} fullWidth>
+        <Button size="small" className="text-primary col-span-1 bg-theme-highlight" onClick={handleCancel} fullWidth>
           {t('admin:components.common.reset')}
         </Button>
         <Button
diff --git a/packages/client-core/src/admin/components/settings/tabs/email.tsx b/packages/client-core/src/admin/components/settings/tabs/email.tsx
index 0ee1a69832..83256e838e 100644
--- a/packages/client-core/src/admin/components/settings/tabs/email.tsx
+++ b/packages/client-core/src/admin/components/settings/tabs/email.tsx
@@ -222,7 +222,7 @@ const EmailTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRefO
         )}
 
         <div className="col-span-1 grid grid-cols-4 gap-6">
-          <Button size="small" className="text-primary bg-theme-highlight col-span-1" fullWidth onClick={handleCancel}>
+          <Button size="small" className="text-primary col-span-1 bg-theme-highlight" fullWidth onClick={handleCancel}>
             {t('admin:components.common.reset')}
           </Button>
           <Button
diff --git a/packages/client-core/src/admin/components/settings/tabs/helm.tsx b/packages/client-core/src/admin/components/settings/tabs/helm.tsx
index 9225e44ae4..a66d74b769 100644
--- a/packages/client-core/src/admin/components/settings/tabs/helm.tsx
+++ b/packages/client-core/src/admin/components/settings/tabs/helm.tsx
@@ -125,7 +125,7 @@ const HelmTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRefOb
         />
 
         <div className="col-span-1 mt-6 grid grid-cols-4 gap-6">
-          <Button size="small" className="text-primary bg-theme-highlight col-span-1" onClick={handleCancel} fullWidth>
+          <Button size="small" className="text-primary col-span-1 bg-theme-highlight" onClick={handleCancel} fullWidth>
             {t('admin:components.common.reset')}
           </Button>
 
diff --git a/packages/client-core/src/admin/components/settings/tabs/project.tsx b/packages/client-core/src/admin/components/settings/tabs/project.tsx
index 19cfc8a324..02a9bfdb8b 100644
--- a/packages/client-core/src/admin/components/settings/tabs/project.tsx
+++ b/packages/client-core/src/admin/components/settings/tabs/project.tsx
@@ -156,7 +156,7 @@ const ProjectTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRe
           <div className="mb-3 grid grid-cols-8 gap-2">
             <Button
               size="small"
-              className="text-primary bg-theme-highlight col-span-1"
+              className="text-primary col-span-1 bg-theme-highlight"
               fullWidth
               onClick={handleCancel}
             >
diff --git a/packages/client-core/src/admin/components/settings/tabs/server.tsx b/packages/client-core/src/admin/components/settings/tabs/server.tsx
index f2845cad5c..b5065c785d 100644
--- a/packages/client-core/src/admin/components/settings/tabs/server.tsx
+++ b/packages/client-core/src/admin/components/settings/tabs/server.tsx
@@ -236,7 +236,7 @@ const ServerTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
         )}
 
         <div className="col-span-1 grid grid-cols-4 gap-6">
-          <Button size="small" className="text-primary bg-theme-highlight col-span-1" fullWidth onClick={handleCancel}>
+          <Button size="small" className="text-primary col-span-1 bg-theme-highlight" fullWidth onClick={handleCancel}>
             {t('admin:components.common.reset')}
           </Button>
           <Button
diff --git a/packages/client-core/src/admin/components/user/UserTable.tsx b/packages/client-core/src/admin/components/user/UserTable.tsx
index c783722040..7d560f68b5 100644
--- a/packages/client-core/src/admin/components/user/UserTable.tsx
+++ b/packages/client-core/src/admin/components/user/UserTable.tsx
@@ -133,7 +133,7 @@ export default function UserTable({
               title={t('admin:components.common.view')}
               onClick={() => PopoverState.showPopupover(<AddEditUserModal user={row} />)}
             >
-              <HiPencil className="text-theme-iconGreen place-self-center" />
+              <HiPencil className="place-self-center text-theme-iconGreen" />
             </Button>
             <Button
               rounded="full"
@@ -152,7 +152,7 @@ export default function UserTable({
                 )
               }}
             >
-              <HiTrash className="text-theme-iconRed place-self-center" />
+              <HiTrash className="place-self-center text-theme-iconRed" />
             </Button>
           </div>
         )
diff --git a/packages/client-core/tailwind.config.js b/packages/client-core/tailwind.config.js
deleted file mode 100644
index e2f69ce99c..0000000000
--- a/packages/client-core/tailwind.config.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
-CPAL-1.0 License
-
-The contents of this file are subject to the Common Public Attribution License
-Version 1.0. (the "License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
-The License is based on the Mozilla Public License Version 1.1, but Sections 14
-and 15 have been added to cover use of software over a computer network and 
-provide for limited attribution for the Original Developer. In addition, 
-Exhibit A has been modified to be consistent with Exhibit B.
-
-Software distributed under the License is distributed on an "AS IS" basis,
-WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
-specific language governing rights and limitations under the License.
-
-The Original Code is Ethereal Engine.
-
-The Original Developer is the Initial Developer. The Initial Developer of the
-Original Code is the Ethereal Engine team.
-
-All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
-Ethereal Engine. All Rights Reserved.
-*/
-
-/** @type {import('tailwindcss').Config} */
-
-module.exports = {
-  mode: 'jit',
-  content: ['../**/*.{ts,tsx}'],
-  darkMode: ['class', '[data-theme="dark"]'],
-  important: true, // important in prod is must be
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-onboarding': 'linear-gradient(180deg, #0A0A0A 0%, #262626 100%)',
-        'text-gradient-onboarding': 'linear-gradient(275deg, #4195FB 4.98%, #4E9CFB 61.64%, #A5CDFD 97.96%)',
-        'button-gradient-onboarding': 'linear-gradient(96deg, #375DAF 57.63%, #6481C1 100%)'
-      },
-      textColor: {
-        theme: {
-          primary: 'var(--text-primary)',
-          secondary: 'var(--text-secondary)',
-          highlight: 'var(--text-highlight)',
-          iconGreen: 'var(--icon-green)',
-          iconRed: 'var(--icon-red)'
-        }
-      },
-      backgroundColor: {
-        theme: {
-          primary: 'var(--bg-primary)',
-          secondary: 'var(--bg-secondary)',
-          highlight: 'var(--bg-highlight)',
-          surfaceInput: 'var(--bg-surface-input)',
-          'surface-main': 'var(--bg-surface-main)',
-          'table-secondary': 'var(--bg-table-secondary)',
-          'blue-secondary': 'var(--bg-blue-secondary)',
-          buttonTertiary: 'var(--bg-button-tertiary)',
-          bannerInformative: 'var(--bg-banner-informative)',
-          tagGreen: 'var(--bg-tag-green)',
-          tagLime: 'var(--bg-tag-lime)',
-          tagRed: 'var(--bg-tag-red)',
-          tagYellow: 'var(--bg-tag-yellow)'
-        }
-      },
-      borderColor: {
-        theme: {
-          primary: 'var(--border-primary)'
-        }
-      },
-      colors: {
-        'blue-primary': '#375DAF'
-      }
-    }
-  }
-}
diff --git a/packages/client/src/pages/_app_tw.tsx b/packages/client/src/pages/_app_tw.tsx
index db5b4b5e78..46f71f452d 100755
--- a/packages/client/src/pages/_app_tw.tsx
+++ b/packages/client/src/pages/_app_tw.tsx
@@ -75,7 +75,7 @@ const AppPage = () => {
   }, [selfUser.id])
 
   if (!/auth\/oauth/.test(location.pathname) && !isLoggedIn.value) {
-    return <LoadingView fullScreen className={`block h-12 w-12`} title={t('common:loader.loadingRoutes')} />
+    return <LoadingView fullScreen className="block h-12 w-12" title={t('common:loader.loadingRoutes')} />
   }
 
   return (
diff --git a/packages/client/tailwind.config.js b/packages/client/tailwind.config.js
index 5644f61934..a55239af2c 100644
--- a/packages/client/tailwind.config.js
+++ b/packages/client/tailwind.config.js
@@ -23,55 +23,8 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-/** @type {import('tailwindcss').Config} */
+import tailwindConfig from '../../tailwind.config'
 
 module.exports = {
-  mode: 'jit',
-  content: ['../**/*.{ts,tsx}'],
-  darkMode: ['class', '[data-theme="dark"]'],
-  important: true, // important in prod is must be
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-onboarding': 'linear-gradient(180deg, #0A0A0A 0%, #262626 100%)',
-        'text-gradient-onboarding': 'linear-gradient(275deg, #4195FB 4.98%, #4E9CFB 61.64%, #A5CDFD 97.96%)',
-        'button-gradient-onboarding': 'linear-gradient(96deg, #375DAF 57.63%, #6481C1 100%)'
-      },
-      textColor: {
-        theme: {
-          primary: 'var(--text-primary)',
-          secondary: 'var(--text-secondary)',
-          highlight: 'var(--text-highlight)',
-          iconGreen: 'var(--icon-green)',
-          iconRed: 'var(--icon-red)'
-        }
-      },
-      backgroundColor: {
-        theme: {
-          primary: 'var(--bg-primary)',
-          secondary: 'var(--bg-secondary)',
-          highlight: 'var(--bg-highlight)',
-          surfaceInput: 'var(--bg-surface-input)',
-          'surface-main': 'var(--bg-surface-main)',
-          'table-secondary': 'var(--bg-table-secondary)',
-          'blue-secondary': 'var(--bg-blue-secondary)',
-          buttonTertiary: 'var(--bg-button-tertiary)',
-          bannerInformative: 'var(--bg-banner-informative)',
-          tagGreen: 'var(--bg-tag-green)',
-          tagLime: 'var(--bg-tag-lime)',
-          tagRed: 'var(--bg-tag-red)',
-          tagYellow: 'var(--bg-tag-yellow)',
-          selection: 'var(--selection)'
-        }
-      },
-      borderColor: {
-        theme: {
-          primary: 'var(--border-primary)'
-        }
-      },
-      colors: {
-        'blue-primary': '#375DAF'
-      }
-    }
-  }
-}
+  ...tailwindConfig
+}
\ No newline at end of file
diff --git a/packages/ui/src/primitives/tailwind/Accordion/index.tsx b/packages/ui/src/primitives/tailwind/Accordion/index.tsx
index d147ab38d5..8d5c5b3eba 100644
--- a/packages/ui/src/primitives/tailwind/Accordion/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Accordion/index.tsx
@@ -59,7 +59,7 @@ const Accordion = forwardRef(
     }: AccordionProps,
     ref: React.MutableRefObject<HTMLDivElement>
   ): JSX.Element => {
-    const twClassName = twMerge('bg-theme-surface-main w-full rounded-2xl p-6 ', className)
+    const twClassName = twMerge('w-full rounded-2xl bg-theme-surface-main p-6 ', className)
     const twClassNameTitle = twMerge('flex flex-row items-center', titleClassName)
     const openState = useHookstate(false)
 
@@ -70,7 +70,7 @@ const Accordion = forwardRef(
     return (
       <div className={twClassName} {...props} ref={ref}>
         <div
-          className="hover:bg-theme-highlight flex w-full cursor-pointer items-center justify-between"
+          className="flex w-full cursor-pointer items-center justify-between hover:bg-theme-highlight"
           onClick={() => {
             openState.set((v) => !v)
           }}
diff --git a/packages/ui/src/primitives/tailwind/Input/index.tsx b/packages/ui/src/primitives/tailwind/Input/index.tsx
index ea869be00c..102cb59849 100644
--- a/packages/ui/src/primitives/tailwind/Input/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Input/index.tsx
@@ -79,8 +79,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const twClassname = twMerge(
       'text-base font-normal tracking-tight',
-      'textshadow-sm border-theme-primary bg-theme-surfaceInput flex h-9 w-full rounded-lg border px-3.5 py-5 transition-colors',
-      'file:bg-theme-surfaceInput file:border-0 file:text-sm file:font-medium',
+      'textshadow-sm flex h-9 w-full rounded-lg border border-theme-primary bg-theme-surfaceInput px-3.5 py-5 transition-colors',
+      'file:border-0 file:bg-theme-surfaceInput file:text-sm file:font-medium',
       'dark:[color-scheme:dark]',
       'focus-visible:ring-ring placeholder:text-gray-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
       variant !== 'outlined' ? '' : 'focus-visible:ring-1',
@@ -128,9 +128,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             <div className="pointer-events-auto absolute inset-y-0 end-0 flex items-center">{endComponent}</div>
           )}
         </div>
-        {description && <p className="text-theme-secondary self-stretch text-xs">{description}</p>}
+        {description && <p className="self-stretch text-xs text-theme-secondary">{description}</p>}
         {error && (
-          <p className="text-theme-iconRed inline-flex items-center gap-2.5 self-start text-sm">
+          <p className="inline-flex items-center gap-2.5 self-start text-sm text-theme-iconRed">
             <HiXCircle /> {error}
           </p>
         )}
diff --git a/packages/ui/src/primitives/tailwind/Label/index.tsx b/packages/ui/src/primitives/tailwind/Label/index.tsx
index 79f29b48b8..a6d8793c1b 100644
--- a/packages/ui/src/primitives/tailwind/Label/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Label/index.tsx
@@ -34,7 +34,7 @@ const Label = ({ className, children, ...props }: LabelProps) => {
   return (
     <label
       className={twMerge(
-        'text-theme-secondary inline-block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'inline-block text-sm font-medium leading-none text-theme-secondary peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         className
       )}
       {...props}
diff --git a/packages/ui/src/primitives/tailwind/Modal/index.tsx b/packages/ui/src/primitives/tailwind/Modal/index.tsx
index 85f50f39a2..1cd114771f 100644
--- a/packages/ui/src/primitives/tailwind/Modal/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Modal/index.tsx
@@ -57,7 +57,7 @@ export const ModalHeader = ({
 }) => {
   // sticky top-0 z-10 bg-theme-surface-main
   return (
-    <div className="border-b-theme-primary relative flex items-center justify-center border-b px-6 py-5">
+    <div className="relative flex items-center justify-center border-b border-b-theme-primary px-6 py-5">
       {title && <Text>{title}</Text>}
       <Button
         variant="outline"
@@ -90,7 +90,7 @@ export const ModalFooter = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className="border-t-theme-primary grid grid-flow-col border-t px-6 py-5">
+    <div className="grid grid-flow-col border-t border-t-theme-primary px-6 py-5">
       {showCloseButton && (
         <Button variant="outline" disabled={closeButtonDisabled} onClick={() => onCancel && onCancel(false)}>
           {closeButtonText || t('common:components.cancel')}
@@ -127,7 +127,7 @@ const Modal = ({
   const twClassName = twMerge('relative z-50 max-h-[80vh] w-full', className)
   return (
     <div className={twClassName}>
-      <div className="bg-theme-surface-main relative rounded-lg shadow">
+      <div className="relative rounded-lg bg-theme-surface-main shadow">
         {onClose && <ModalHeader title={title} onClose={onClose} />}
         <div className="h-fit max-h-[60vh] w-full overflow-y-auto px-10 py-6">{children}</div>
         {!hideFooter && (
diff --git a/packages/ui/src/primitives/tailwind/MultiEmailInput/index.tsx b/packages/ui/src/primitives/tailwind/MultiEmailInput/index.tsx
index 39a0d32997..9d941f3432 100644
--- a/packages/ui/src/primitives/tailwind/MultiEmailInput/index.tsx
+++ b/packages/ui/src/primitives/tailwind/MultiEmailInput/index.tsx
@@ -130,10 +130,10 @@ const MultiEmailInput = ({ emailList, error, label, disabled }: LabelProps) => {
       {label && <Label className="self-stretch">{label}</Label>}
 
       {emailList.length > 0 && (
-        <div className="border-theme-primary bg-theme-surfaceInput flex flex-wrap gap-2	rounded-lg border px-3.5 py-1.5">
+        <div className="flex flex-wrap gap-2 rounded-lg border	border-theme-primary bg-theme-surfaceInput px-3.5 py-1.5">
           {emailList.value.map((item) => (
             <div
-              className="bg-theme-surface-main text-theme-primary flex w-fit items-center justify-between gap-1 rounded px-2 py-1 text-black"
+              className="flex w-fit items-center justify-between gap-1 rounded bg-theme-surface-main px-2 py-1 text-black text-theme-primary"
               key={item}
             >
               {item}
diff --git a/packages/ui/src/primitives/tailwind/MultiSelect/index.tsx b/packages/ui/src/primitives/tailwind/MultiSelect/index.tsx
index 2dae9c973d..a4a50adf38 100644
--- a/packages/ui/src/primitives/tailwind/MultiSelect/index.tsx
+++ b/packages/ui/src/primitives/tailwind/MultiSelect/index.tsx
@@ -61,7 +61,7 @@ const MultiSelect = <T extends string | number>({
   menuClassName
 }: MultiSelectProps<T>) => {
   const { t } = useTranslation()
-  const twClassName = twMerge('bg-theme-surface-main relative', className)
+  const twClassName = twMerge('relative bg-theme-surface-main', className)
   const ref = useRef<HTMLDivElement>(null)
 
   const showOptions = useHookstate(false)
@@ -88,14 +88,14 @@ const MultiSelect = <T extends string | number>({
   return (
     <div className={twClassName} ref={ref}>
       <Label>{label}</Label>
-      {description && <p className="text-theme-secondary self-stretch text-xs">{description}</p>}
+      {description && <p className="self-stretch text-xs text-theme-secondary">{description}</p>}
       {error && (
-        <p className="text-theme-iconRed inline-flex items-center gap-2.5 self-start text-sm">
+        <p className="inline-flex items-center gap-2.5 self-start text-sm text-theme-iconRed">
           <HiXCircle /> {error}
         </p>
       )}
       <div
-        className="textshadow-sm border-theme-primary bg-theme-surface-main mt-2 flex min-h-10 w-full flex-auto flex-wrap items-center rounded-lg border px-3.5 pr-7"
+        className="textshadow-sm mt-2 flex min-h-10 w-full flex-auto flex-wrap items-center rounded-lg border border-theme-primary bg-theme-surface-main px-3.5 pr-7"
         onClick={() => showOptions.set((value) => !value)}
       >
         {selectedOptions.length === 0 && (
@@ -106,7 +106,7 @@ const MultiSelect = <T extends string | number>({
         {selectedOptions.map((selectedOption) => (
           <div
             key={selectedOption}
-            className="border-theme-primary bg-theme-surface-main text-theme-primary m-1 flex h-7 items-center justify-center gap-1 rounded border p-1 font-medium"
+            className="m-1 flex h-7 items-center justify-center gap-1 rounded border border-theme-primary bg-theme-surface-main p-1 font-medium text-theme-primary"
           >
             <Text className="text-theme-primary">{options.find((opt) => opt.value === selectedOption)?.label}</Text>
             <HiXCircle
@@ -119,14 +119,14 @@ const MultiSelect = <T extends string | number>({
 
       <MdOutlineKeyboardArrowDown
         size="1.5em"
-        className={`text-theme-primary absolute right-3 top-10 transition-transform ${
+        className={`absolute right-3 top-10 text-theme-primary transition-transform ${
           showOptions.value ? 'rotate-180' : ''
         }`}
         onClick={() => showOptions.set((value) => !value)}
       />
 
       <div
-        className={`border-theme-primary bg-theme-secondary absolute z-[1000] mt-2 w-full rounded border ${
+        className={`absolute z-[1000] mt-2 w-full rounded border border-theme-primary bg-theme-secondary ${
           showOptions.value ? 'visible' : 'hidden'
         }`}
       >
@@ -136,7 +136,7 @@ const MultiSelect = <T extends string | number>({
             <li
               key={option.value}
               className={twMerge(
-                'text-theme-primary cursor-pointer px-4 py-2',
+                'cursor-pointer px-4 py-2 text-theme-primary',
                 option.disabled ? 'cursor-not-allowed' : 'hover:bg-theme-surface-main hover:text-theme-highlight'
               )}
               onClick={() => {
diff --git a/packages/ui/src/primitives/tailwind/Progress/index.tsx b/packages/ui/src/primitives/tailwind/Progress/index.tsx
index 62cd59f7a5..acb09e556e 100644
--- a/packages/ui/src/primitives/tailwind/Progress/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Progress/index.tsx
@@ -42,7 +42,7 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLProgressElement>
 
 const Progress = ({ className, barClassName, value, size = 'default' }: ProgressProps) => {
   const twClassName = twMerge(sizes[size], 'w-full rounded-full bg-gray-200 dark:bg-gray-700', className)
-  const twBarClassName = twMerge(sizes[size], 'bg-blue-primary rounded-full', barClassName)
+  const twBarClassName = twMerge(sizes[size], 'rounded-full bg-blue-primary', barClassName)
 
   return (
     <div className={twClassName}>
diff --git a/packages/ui/src/primitives/tailwind/Radio/index.tsx b/packages/ui/src/primitives/tailwind/Radio/index.tsx
index 46a93bc030..565b8d6dc0 100644
--- a/packages/ui/src/primitives/tailwind/Radio/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Radio/index.tsx
@@ -51,12 +51,12 @@ export const RadioRoot = ({
         name={label}
         onChange={onChange}
         disabled={disabled}
-        className="text-blue-primary checked:border-blue-primary focus:ring-blue-primary shrink-0 rounded-full border-gray-200 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:focus:ring-offset-gray-800"
+        className="shrink-0 rounded-full border-gray-200 text-blue-primary checked:border-blue-primary focus:ring-blue-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:focus:ring-offset-gray-800"
       />
       <label
         onClick={() => onChange({ target: { value } } as any)}
         htmlFor={label}
-        className="text-theme-primary ml-2 cursor-pointer align-bottom text-sm font-medium"
+        className="ml-2 cursor-pointer align-bottom text-sm font-medium text-theme-primary"
       >
         {label}
       </label>
diff --git a/packages/ui/src/primitives/tailwind/Select/index.tsx b/packages/ui/src/primitives/tailwind/Select/index.tsx
index 9071d0ca4d..94e85f4ac4 100644
--- a/packages/ui/src/primitives/tailwind/Select/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Select/index.tsx
@@ -144,13 +144,13 @@ const Select = <T extends OptionValueType>({
       />
       <MdOutlineKeyboardArrowDown
         size="1.5em"
-        className={`text-theme-primary absolute right-3 transition-transform ${showOptions.value ? 'rotate-180' : ''} ${
+        className={`absolute right-3 text-theme-primary transition-transform ${showOptions.value ? 'rotate-180' : ''} ${
           label ? 'top-8' : 'top-2'
         }`}
         onClick={toggleDropdown}
       />
       <div
-        className={`border-theme-primary bg-theme-surface-main absolute z-10 mt-2 w-full rounded border ${
+        className={`absolute z-10 mt-2 w-full rounded border border-theme-primary bg-theme-surface-main ${
           showOptions.value ? 'visible' : 'hidden'
         }`}
       >
@@ -160,7 +160,7 @@ const Select = <T extends OptionValueType>({
               key={option.value}
               value={option.value}
               className={twMerge(
-                'text-theme-secondary cursor-pointer px-4 py-2',
+                'cursor-pointer px-4 py-2 text-theme-secondary',
                 option.disabled ? 'cursor-not-allowed' : 'hover:bg-theme-highlight hover:text-theme-highlight',
                 menuItemClassName
               )}
diff --git a/packages/ui/src/primitives/tailwind/Table/index.tsx b/packages/ui/src/primitives/tailwind/Table/index.tsx
index 6ccba5350f..eb5e12b4be 100644
--- a/packages/ui/src/primitives/tailwind/Table/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Table/index.tsx
@@ -37,7 +37,7 @@ const TableHeaderCell = ({ className, children, ...props }: TableCellProps) => {
   const twClassName = twMerge(
     'text-neutral-600 dark:text-white',
     'p-4',
-    'border-theme-primary border border-[0.5px]',
+    'border border-[0.5px] border-theme-primary',
     className
   )
   return (
@@ -57,7 +57,7 @@ const TableHeadRow = ({
   children: JSX.Element | JSX.Element[]
 }) => {
   const twClassName = twMerge('text-left capitalize', className)
-  const twClassNameThead = twMerge('bg-theme-table-secondary sticky top-0', theadClassName)
+  const twClassNameThead = twMerge('sticky top-0 bg-theme-table-secondary', theadClassName)
   return (
     <thead className={twClassNameThead}>
       <tr className={twClassName}>{children}</tr>
@@ -68,7 +68,7 @@ const TableHeadRow = ({
 const TableCell = ({ className, children, ...props }: TableCellProps) => {
   const twClassName = twMerge(
     'p-4',
-    'border-theme-primary border border-[0.5px]',
+    'border border-[0.5px] border-theme-primary',
     'text-left text-neutral-600 dark:text-white',
     className
   )
@@ -134,7 +134,7 @@ const TablePagination = ({
   onPageChange: (newPage: number) => void
 }) => {
   const commonClasses = twMerge(
-    'bg-theme-primary flex h-8 items-center justify-center border px-3 leading-tight',
+    'flex h-8 items-center justify-center border bg-theme-primary px-3 leading-tight',
     'border-gray-300 dark:border-gray-600',
     'text-gray-400 dark:text-gray-500',
     'enabled:text-gray-600 dark:enabled:dark:text-gray-300',
diff --git a/packages/ui/src/primitives/tailwind/Tabs/index.tsx b/packages/ui/src/primitives/tailwind/Tabs/index.tsx
index 48816133c8..d496663bc4 100644
--- a/packages/ui/src/primitives/tailwind/Tabs/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Tabs/index.tsx
@@ -58,7 +58,7 @@ const Tabs = ({
 }: TabProps): JSX.Element => {
   const twTabcontainerClassName = twMerge('flex gap-4', tabcontainerClassName)
   const twTabClassName = twMerge(
-    'text-theme-secondary p-3 text-sm disabled:cursor-not-allowed disabled:opacity-50 dark:hover:border-b dark:hover:border-b-blue-400',
+    'p-3 text-sm text-theme-secondary disabled:cursor-not-allowed disabled:opacity-50 dark:hover:border-b dark:hover:border-b-blue-400',
     tabClassName
   )
   const currentTab = useHookstate(0)
@@ -102,7 +102,7 @@ const Tabs = ({
               key={index}
               className={twMerge(
                 twTabClassName,
-                currentTab.value === index ? 'border-b-blue-primary text-theme-primary border-b font-semibold' : '',
+                currentTab.value === index ? 'border-b border-b-blue-primary font-semibold text-theme-primary' : '',
                 tab.disabled ? 'border-none' : ''
               )}
               disabled={tab.disabled}
diff --git a/packages/ui/src/primitives/tailwind/Toggle/index.tsx b/packages/ui/src/primitives/tailwind/Toggle/index.tsx
index 1a97a1d416..8327e6c98d 100644
--- a/packages/ui/src/primitives/tailwind/Toggle/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Toggle/index.tsx
@@ -57,7 +57,7 @@ const Toggle = ({
 }: ToggleProps) => {
   const twClassName = twMerge(
     "peer relative cursor-pointer rounded-full bg-gray-200 after:absolute after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-['']",
-    'peer-checked:bg-blue-primary peer-focus:bg-blue-primary dark:peer-focus:bg-blue-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 dark:border-gray-600 dark:bg-gray-700',
+    'peer-checked:bg-blue-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:bg-blue-primary peer-focus:ring-4 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:bg-blue-primary',
     'peer-disabled:pointer-events-none peer-disabled:opacity-50',
     className,
     sizeMap[size ?? 'md']
diff --git a/packages/ui/tailwind.config.js b/tailwind.config.js
similarity index 99%
rename from packages/ui/tailwind.config.js
rename to tailwind.config.js
index b453958e4b..3fba8fcaf1 100644
--- a/packages/ui/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,7 +24,6 @@ Ethereal Engine. All Rights Reserved.
 */
 
 /** @type {import('tailwindcss').Config} */
-
 module.exports = {
   mode: 'jit',
   content: ['../**/*.{ts,tsx}'],