**NOT A WORKING COMMIT** Demo purpose branch to show possible solutions to TailwindCSS & Radix UI css variables issue

src/docs-main.tsx

@@ -1,21 +1,19 @@
-import { RouterProvider, createRouter } from '@tanstack/react-router'
-import { routeTree } from './docs/routeTree.gen'
+import { RouterProvider, createRouter } from '@tanstack/react-router';
+import { routeTree } from './docs/routeTree.gen';
 
+const basepath = import.meta.env.MODE === 'github-pages' ? '/sci-comp-ui' : '';
 
-const basepath =
-  import.meta.env.MODE === 'github-pages' ? '/sci-comp-ui' : ''
-
-
-const router = createRouter({ routeTree, basepath })
+const router = createRouter({ routeTree, basepath });
 
 declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router
-  }
+    interface Register {
+        router: typeof router;
+    }
 }
 
-import './styles/globals.css'
+import './styles/index.css';
+import './styles/theme.css';
 
 export default function DocsApp() {
-  return <RouterProvider router={router} />
+    return <RouterProvider router={router} />;
 }

src/index.ts

@@ -1,5 +1,5 @@
-import './styles/globals.css'
-
-export * from './ui'
-export { cn } from './lib/utils'
+import './styles/index.css';
+import './styles/theme.css';
 
+export * from './ui';
+export { cn } from './lib/utils';

src/main.tsx

@@ -1,27 +1,27 @@
-import { StrictMode } from 'react'
-import ReactDOM from 'react-dom/client'
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
 
 // Only import router-related code when building docs
-const isDocs = import.meta.env.MODE === 'docs' || import.meta.env.MODE === 'github-pages'
+const isDocs = import.meta.env.MODE === 'docs' || import.meta.env.MODE === 'github-pages';
 
 if (isDocs) {
-  // Docs build - include router
-  import('./docs-main').then(({ default: DocsApp }) => {
-    const rootElement = document.getElementById('root')!
-    if (!rootElement.innerHTML) {
-      const root = ReactDOM.createRoot(rootElement)
-      root.render(
-        <StrictMode>
-          <DocsApp />
-        </StrictMode>,
-      )
-    }
-  })
+    // Docs build - include router
+    import('./docs-main').then(({ default: DocsApp }) => {
+        const rootElement = document.getElementById('root')!;
+        if (!rootElement.innerHTML) {
+            const root = ReactDOM.createRoot(rootElement);
+            root.render(
+                <StrictMode>
+                    <DocsApp />
+                </StrictMode>
+            );
+        }
+    });
 } else {
-  // Library build - simple entry point
-  import('./styles/globals.css')
-  
-  // For library builds, we just need to ensure styles are loaded
-  // The actual components are exported from src/index.ts
-  console.log('SciComp UI Library loaded')
-}
+    // Library build - simple entry point
+    import('./styles/theme.css');
+
+    // For library builds, we just need to ensure styles are loaded
+    // The actual components are exported from src/index.ts
+    console.log('SciComp UI Library loaded');
+}