From 1ffa434a5838366d2458d54fd005b903d0f9ed16 Mon Sep 17 00:00:00 2001
From: Michal Chruscielski <michalch775@gmail.com>
Date: Fri, 13 Mar 2026 17:17:36 +0100
Subject: [PATCH] fix: bumped versions tailwind not loading styles error fixed

---
 web/src/components/ui/sidebar.tsx | 14 +++++++-------
 web/src/index.css                 |  4 +---
 web/tailwind.config.js            |  7 +++++--
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
index ef18d9f..9c805ab 100644
--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@@ -204,7 +204,7 @@ const Sidebar = React.forwardRef<
       return (
         <div
           className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            "flex h-full w-sidebar flex-col bg-sidebar text-sidebar-foreground",
             className,
           )}
           ref={ref}
@@ -221,7 +221,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            className="w-sidebar bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
             style={
               {
                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -251,24 +251,24 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "relative w-sidebar bg-transparent transition-[width] duration-200 ease-linear",
             "group-data-[collapsible=offcanvas]:w-0",
             "group-data-[side=right]:rotate-180",
             variant === "floating" || variant === "inset"
               ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+              : "group-data-[collapsible=icon]:w-sidebar-icon",
           )}
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            "fixed inset-y-0 z-10 hidden h-svh w-sidebar transition-[left,right,width] duration-200 ease-linear md:flex",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
             // Adjust the padding for floating and inset variants.
             variant === "floating" || variant === "inset"
               ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              : "group-data-[collapsible=icon]:w-sidebar-icon group-data-[side=left]:border-r group-data-[side=right]:border-l",
             className,
           )}
           {...props}
@@ -697,7 +697,7 @@ const SidebarMenuSkeleton = React.forwardRef<
         />
       )}
       <Skeleton
-        className="h-4 max-w-[--skeleton-width] flex-1"
+        className="h-4 max-w-[var(--skeleton-width)] flex-1"
         data-sidebar="menu-skeleton-text"
         style={
           {
diff --git a/web/src/index.css b/web/src/index.css
index cf18e17..88364d7 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,7 +1,5 @@
+@import "tailwindcss";
 @config "../tailwind.config.js";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 @layer base {
     :root {
         --background: 0 0% 100%;
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 9dbc552..e4f5ebb 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -57,10 +57,13 @@ export default {
     				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
     				accent: 'hsl(var(--sidebar-accent))',
     				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-    				border: 'hsl(var(--sidebar-border))',
     				ring: 'hsl(var(--sidebar-ring))'
     			}
-    		}
+    		},
+            width: {
+                sidebar: 'var(--sidebar-width)',
+                'sidebar-icon': 'var(--sidebar-width-icon)',
+            }
     	}
     },
     plugins: [require("tailwindcss-animate")],