chore(dependencies): update Tailwind CSS and related packages for improved styling

- Added @tailwindcss/postcss as a new dependency.
- Updated tailwindcss to version 4.1.11 for enhanced features and performance.
- Upgraded prettier-plugin-tailwindcss to version 0.6.13 for better formatting support.
- Adjusted postcss.config.js to use the new Tailwind CSS plugin structure.
- Removed the obsolete tailwind.config.js file as it is no longer needed.

worklenz-frontend/package.json

@@ -60,6 +60,7 @@
     "worklenz": "file:"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -73,11 +74,10 @@
     "@types/react-dom": "19.0.0",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
     "postcss": "^8.5.2",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "rollup": "^4.40.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.11",
     "terser": "^5.39.0",
     "typescript": "^5.7.3",
     "vite": "^6.3.5",

worklenz-frontend/postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
-    autoprefixer: {},
   },
 };

worklenz-frontend/src/components/AssigneeSelector.tsx

@@ -227,7 +227,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         <div
           ref={dropdownRef}
           className={`
-            fixed z-[9999] w-72 rounded-md shadow-lg border
+            fixed z-9999 w-72 rounded-md shadow-lg border
             ${isDarkMode 
               ? 'bg-gray-800 border-gray-600' 
               : 'bg-white border-gray-200'
@@ -252,7 +252,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                   ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
                   : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
                 }
-                focus:outline-none focus:ring-1 focus:ring-blue-500
+                focus:outline-hidden focus:ring-1 focus:ring-blue-500
               `}
             />
           </div>

worklenz-frontend/src/components/Avatar.tsx

@@ -69,7 +69,7 @@ const Avatar: React.FC<AvatarProps> = ({
         src={src}
         alt={name}
         onClick={handleClick}
-        className={`rounded-full object-cover shadow-sm cursor-pointer ${className}`}
+        className={`rounded-full object-cover shadow-xs cursor-pointer ${className}`}
         style={avatarStyle}
       />
     );
@@ -78,7 +78,7 @@ const Avatar: React.FC<AvatarProps> = ({
   return (
     <div 
       onClick={handleClick}
-      className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm cursor-pointer ${className}`}
+      className={`rounded-full flex items-center justify-center text-white font-medium shadow-xs cursor-pointer ${className}`}
       style={avatarStyle}
     >
       {name.charAt(0)?.toUpperCase() || '?'}

worklenz-frontend/src/components/AvatarGroup.tsx

@@ -92,7 +92,7 @@ const AvatarGroup: React.FC<AvatarGroupProps> = ({
           isDarkMode={isDarkMode}
         >
           <div 
-            className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm border-2 cursor-pointer ${
+            className={`rounded-full flex items-center justify-center text-white font-medium shadow-xs border-2 cursor-pointer ${
               isDarkMode 
                 ? 'bg-gray-600 border-gray-700' 
                 : 'bg-gray-400 border-white'

worklenz-frontend/src/components/Button.tsx

@@ -24,7 +24,7 @@ const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElemen
   type = 'button',
   ...props 
 }) => {
-  const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-1 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
+  const baseClasses = `inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-hidden focus:ring-2 ${isDarkMode ? 'focus:ring-blue-400' : 'focus:ring-blue-500'} focus:ring-offset-1 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`;
   
   const variantClasses = {
     text: isDarkMode 
@@ -42,7 +42,7 @@ const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElemen
   };
   
   const sizeClasses = {
-    small: 'px-2 py-1 text-xs rounded',
+    small: 'px-2 py-1 text-xs rounded-sm',
     default: 'px-3 py-2 text-sm rounded-md',
     large: 'px-4 py-3 text-base rounded-lg'
   };

worklenz-frontend/src/components/CustomColordLabel.tsx

@@ -18,7 +18,7 @@ const CustomColordLabel: React.FC<CustomColordLabelProps> = ({
   return (
     <Tooltip title={label.name}>
       <span
-        className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white flex-shrink-0 max-w-[120px]"
+        className="inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium text-white shrink-0 max-w-[120px]"
         style={{ backgroundColor: label.color }}
       >
         <span className="truncate">{truncatedName}</span>

worklenz-frontend/src/components/LabelsSelector.tsx

@@ -180,7 +180,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
         <div
           ref={dropdownRef}
           className={`
-            fixed z-[9999] w-72 rounded-md shadow-lg border
+            fixed z-9999 w-72 rounded-md shadow-lg border
             ${isDarkMode 
               ? 'bg-gray-800 border-gray-600' 
               : 'bg-white border-gray-200'
@@ -206,7 +206,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
                   ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
                   : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
                 }
-                focus:outline-none focus:ring-1 focus:ring-blue-500
+                focus:outline-hidden focus:ring-1 focus:ring-blue-500
               `}
             />
           </div>
@@ -230,7 +230,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
                   />
                   
                   <div
-                    className="w-3 h-3 rounded-full flex-shrink-0"
+                    className="w-3 h-3 rounded-full shrink-0"
                     style={{ backgroundColor: label.color_code }}
                   />
                   

worklenz-frontend/src/components/Tag.tsx

@@ -24,7 +24,7 @@ const Tag: React.FC<TagProps> = ({
     default: 'px-2 py-1 text-xs'
   };
 
-  const baseClasses = `inline-flex items-center font-medium rounded ${sizeClasses[size]}`;
+  const baseClasses = `inline-flex items-center font-medium rounded-sm ${sizeClasses[size]}`;
   
   if (variant === 'outlined') {
     return (

worklenz-frontend/src/components/Tooltip.tsx

@@ -25,7 +25,7 @@ const Tooltip: React.FC<TooltipProps> = ({
   return (
     <div className={`relative group ${className}`}>
       {children}
-      <div className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}>
+      <div className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded-sm shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}>
         {title}
       </div>
     </div>

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateTaskCard.tsx

@@ -128,7 +128,7 @@ const EnhancedKanbanCreateTaskCard: React.FC<EnhancedKanbanCreateTaskCardProps>
         marginBottom: 8,
         marginTop: 8,
       }}
-      className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
+      className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
     >
       <Input
         ref={inputRef}

worklenz-frontend/src/components/schedule/grant-chart/grantt-chart.tsx

@@ -114,7 +114,7 @@ const GranttChart = React.forwardRef(({ type, date }: { type: string; date: Date
         style={{
           background: themeWiseColor('#fff', '#141414', themeMode),
         }}
-        className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
+        className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
       >
         <GranttMembersTable
           members={teamData}
@@ -266,7 +266,7 @@ const GranttChart = React.forwardRef(({ type, date }: { type: string; date: Date
                           >
                             <div
                               style={{ width: '100%', height: '100%' }}
-                              className={`rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`}
+                              className={`rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`}
                             ></div>
                           </div>
                         ))

worklenz-frontend/src/components/task-list-common/priorityDropdown/priority-dropdown.tsx

@@ -153,7 +153,7 @@ const PriorityDropdown = ({ task, teamId }: PriorityDropdownProps) => {
   // Fallback rendering for raw priority values or when priority list is not loaded
   return (
     <div 
-      className="px-2 py-1 text-xs rounded"
+      className="px-2 py-1 text-xs rounded-sm"
       style={{
         backgroundColor: getPriorityColor(task.priority) + ALPHA_CHANNEL,
         borderRadius: 16,

worklenz-frontend/src/components/task-list-common/status-dropdown/status-dropdown.tsx

@@ -128,7 +128,7 @@ const StatusDropdown = ({ task, teamId }: StatusDropdownProps) => {
   // Fallback rendering for raw status values or when status list is not loaded
   return (
     <div 
-      className="px-2 py-1 text-xs rounded"
+      className="px-2 py-1 text-xs rounded-sm"
       style={{
         backgroundColor: getStatusColor(task.status),
         borderRadius: 16,

worklenz-frontend/src/components/task-list-common/task-row/task-row-name/task-row-name.tsx

@@ -52,7 +52,7 @@ const TaskRowName = React.memo(
       return (
         <button
           onClick={() => handleToggleExpansion(taskId)}
-          className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] transition duration-150"
+          className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] transition duration-150"
         >
           {expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
         </button>

worklenz-frontend/src/components/task-management/asana-style-lazy-demo.tsx

@@ -15,7 +15,7 @@ const HeavyAssigneeSelector = React.lazy(() =>
   new Promise<{ default: React.ComponentType }>((resolve) => 
     setTimeout(() => resolve({
       default: () => (
-        <div className="p-4 border rounded bg-blue-50">
+        <div className="p-4 border rounded-sm bg-blue-50">
           <Text strong>🚀 Heavy Assignee Selector Loaded!</Text>
           <br />
           <Text type="secondary">This component contains:</Text>
@@ -36,7 +36,7 @@ const HeavyDatePicker = React.lazy(() =>
   new Promise<{ default: React.ComponentType }>((resolve) => 
     setTimeout(() => resolve({
       default: () => (
-        <div className="p-4 border rounded bg-green-50">
+        <div className="p-4 border rounded-sm bg-green-50">
           <Text strong>📅 Heavy Date Picker Loaded!</Text>
           <br />
           <Text type="secondary">This component contains:</Text>
@@ -57,7 +57,7 @@ const HeavyPrioritySelector = React.lazy(() =>
   new Promise<{ default: React.ComponentType }>((resolve) => 
     setTimeout(() => resolve({
       default: () => (
-        <div className="p-4 border rounded bg-orange-50">
+        <div className="p-4 border rounded-sm bg-orange-50">
           <Text strong>🔥 Heavy Priority Selector Loaded!</Text>
           <br />
           <Text type="secondary">This component contains:</Text>
@@ -78,7 +78,7 @@ const HeavyLabelsSelector = React.lazy(() =>
   new Promise<{ default: React.ComponentType }>((resolve) => 
     setTimeout(() => resolve({
       default: () => (
-        <div className="p-4 border rounded bg-purple-50">
+        <div className="p-4 border rounded-sm bg-purple-50">
           <Text strong>🏷️ Heavy Labels Selector Loaded!</Text>
           <br />
           <Text type="secondary">This component contains:</Text>
@@ -163,7 +163,7 @@ const AsanaStyleLazyDemo: React.FC = () => {
     <Card className="max-w-4xl mx-auto">
       <Title level={3}>🎯 Asana-Style Lazy Loading Demo</Title>
       
-      <div className="mb-4 p-4 bg-gray-50 rounded">
+      <div className="mb-4 p-4 bg-gray-50 rounded-sm">
         <Text strong>Performance Benefits:</Text>
         <ul className="mt-2 text-sm">
           <li>✅ <strong>Faster Initial Load:</strong> Only lightweight placeholders load initially</li>
@@ -220,25 +220,25 @@ const AsanaStyleLazyDemo: React.FC = () => {
 
         <div className="space-y-4">
           {showComponents.assignee && (
-            <Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading assignee selector...</div>}>
+            <Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading assignee selector...</div>}>
               <HeavyAssigneeSelector />
             </Suspense>
           )}
 
           {showComponents.date && (
-            <Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading date picker...</div>}>
+            <Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading date picker...</div>}>
               <HeavyDatePicker />
             </Suspense>
           )}
 
           {showComponents.priority && (
-            <Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading priority selector...</div>}>
+            <Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading priority selector...</div>}>
               <HeavyPrioritySelector />
             </Suspense>
           )}
 
           {showComponents.labels && (
-            <Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading labels selector...</div>}>
+            <Suspense fallback={<div className="p-4 border rounded-sm bg-gray-100">Loading labels selector...</div>}>
               <HeavyLabelsSelector />
             </Suspense>
           )}

worklenz-frontend/src/components/task-management/assignee-dropdown-content.tsx

@@ -146,7 +146,7 @@ const AssigneeDropdownContent: React.FC<AssigneeDropdownContentProps> = ({
     <div
       ref={dropdownRef}
       className={`
-        fixed z-[9999] w-72 rounded-md shadow-lg border
+        fixed z-9999 w-72 rounded-md shadow-lg border
         ${isDarkMode 
           ? 'bg-gray-800 border-gray-600' 
           : 'bg-white border-gray-200'
@@ -171,7 +171,7 @@ const AssigneeDropdownContent: React.FC<AssigneeDropdownContentProps> = ({
               ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
               : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
             }
-            focus:outline-none focus:ring-1 focus:ring-blue-500
+            focus:outline-hidden focus:ring-1 focus:ring-blue-500
           `}
         />
       </div>

worklenz-frontend/src/components/task-management/improved-task-filters.tsx

@@ -367,7 +367,7 @@ const FilterDropdown: React.FC<{
             ? (isDarkMode ? 'bg-blue-600 text-white border-blue-500' : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold')
             : `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
           }
-          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+          hover:shadow-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
           ${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
         `}
         aria-expanded={isOpen}
@@ -397,7 +397,7 @@ const FilterDropdown: React.FC<{
                   value={searchTerm}
                   onChange={e => setSearchTerm(e.target.value)}
                   placeholder={`Search ${section.label.toLowerCase()}...`}
-                  className={`w-full pl-8 pr-2 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
+                  className={`w-full pl-8 pr-2 py-1 rounded border focus:outline-hidden focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
                     isDarkMode
                       ? 'bg-[#141414] text-[#d9d9d9] placeholder-gray-400 border-[#303030]'
                       : 'bg-white text-gray-900 placeholder-gray-400 border-gray-300'
@@ -520,7 +520,7 @@ const SearchFilter: React.FC<{
       {!isExpanded ? (
         <button
           onClick={handleToggle}
-          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
+          className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md border transition-all duration-200 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${
             themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
           }`}
         >
@@ -537,7 +537,7 @@ const SearchFilter: React.FC<{
               value={localValue}
               onChange={(e) => setLocalValue(e.target.value)}
               placeholder={placeholder}
-              className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
+              className={`w-full pr-4 pl-8 py-1 rounded border focus:outline-hidden focus:ring-2 focus:ring-blue-500 transition-colors duration-150 ${
                 isDarkMode
                   ? 'bg-[#141414] text-[#d9d9d9] placeholder-gray-400 border-[#303030]'
                   : 'bg-white text-gray-900 placeholder-gray-400 border-gray-300'
@@ -555,7 +555,7 @@ const SearchFilter: React.FC<{
           </div>
           <button
             type="submit"
-            className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors duration-200"
+            className="px-2.5 py-1.5 text-xs font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors duration-200"
           >
             Search
           </button>
@@ -622,7 +622,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
             ? (isDarkMode ? 'bg-blue-600 text-white border-blue-500' : 'bg-blue-50 text-blue-800 border-blue-300 font-semibold')
             : `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
           }
-          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+          hover:shadow-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
           ${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
         `}
         aria-expanded={open}
@@ -977,7 +977,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
   }, [dispatch, projectId, position, showArchived]);
 
   return (
-    <div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${className}`}>
+    <div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-xs ${className}`}>
       <div className="flex flex-wrap items-center gap-2">
         {/* Left Section - Main Filters */}
         <div className="flex flex-wrap items-center gap-2">

worklenz-frontend/src/components/task-management/task-phase-dropdown.tsx

@@ -146,7 +146,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
           ref={dropdownRef}
           className={`
             fixed min-w-[160px] max-w-[220px] 
-            rounded border backdrop-blur-sm z-[9999]
+            rounded border backdrop-blur-xs z-9999
             ${isDarkMode 
               ? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50' 
               : 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
@@ -187,7 +187,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
               
               {/* No Phase Color Indicator */}
               <div 
-                className={`w-3 h-3 rounded-full shadow-sm border-2 ${
+                className={`w-3 h-3 rounded-full shadow-xs border-2 ${
                   isDarkMode ? 'border-gray-800/30' : 'border-white/20'
                 }`}
                 style={{ backgroundColor: isDarkMode ? '#4b5563' : '#9ca3af' }}
@@ -234,7 +234,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
                 >
                   {/* Phase Color Indicator */}
                   <div 
-                    className={`w-3 h-3 rounded-full shadow-sm border-2 ${
+                    className={`w-3 h-3 rounded-full shadow-xs border-2 ${
                       isDarkMode ? 'border-gray-800/30' : 'border-white/20'
                     }`}
                     style={{ backgroundColor: getPhaseColor(phase) }}

worklenz-frontend/src/components/task-management/task-priority-dropdown.tsx

@@ -147,7 +147,7 @@ const TaskPriorityDropdown: React.FC<TaskPriorityDropdownProps> = ({
           ref={dropdownRef}
           className={`
             fixed min-w-[160px] max-w-[220px] 
-            rounded border backdrop-blur-sm z-[9999]
+            rounded border backdrop-blur-xs z-9999
             ${isDarkMode 
               ? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50' 
               : 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
@@ -193,7 +193,7 @@ const TaskPriorityDropdown: React.FC<TaskPriorityDropdownProps> = ({
                   
                   {/* Priority Color Indicator */}
                   <div 
-                    className={`w-3 h-3 rounded-full shadow-sm border-2 ${
+                    className={`w-3 h-3 rounded-full shadow-xs border-2 ${
                       isDarkMode ? 'border-gray-800/30' : 'border-white/20'
                     }`}
                     style={{ backgroundColor: getPriorityColor(priority) }}

worklenz-frontend/src/components/task-management/task-row.tsx

@@ -200,7 +200,7 @@ const AssigneePlaceholder = React.memo<{ isDarkMode: boolean; memberCount?: numb
     ) : (
       <div className={`w-6 h-6 rounded-full ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
     )}
-    <div className={`w-4 h-4 rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
+    <div className={`w-4 h-4 rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
   </div>
 ));
 
@@ -249,7 +249,7 @@ const LabelsPlaceholder = React.memo<{ labelCount?: number; isDarkMode: boolean
         />
       ))
     ) : (
-      <div className={`w-4 h-4 rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
+      <div className={`w-4 h-4 rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
     )}
   </div>
 ));
@@ -257,7 +257,7 @@ const LabelsPlaceholder = React.memo<{ labelCount?: number; isDarkMode: boolean
 // PERFORMANCE OPTIMIZATION: Simplified placeholders without animations under memory pressure
 const SimplePlaceholder = React.memo<{ width: number; height: number; isDarkMode: boolean }>(({ width, height, isDarkMode }) => (
   <div 
-    className={`rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`}
+    className={`rounded-sm ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`}
     style={{ width, height }}
   />
 ));
@@ -614,7 +614,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
       ? (isDarkMode ? 'bg-blue-900/20' : 'bg-blue-50')
       : '';
     const overlay = isDragOverlay 
-      ? `rounded shadow-lg border-2 ${isDarkMode ? 'border-gray-600 shadow-2xl' : 'border-gray-300 shadow-2xl'}`
+      ? `rounded-sm shadow-lg border-2 ${isDarkMode ? 'border-gray-600 shadow-2xl' : 'border-gray-300 shadow-2xl'}`
       : '';
     
     return {
@@ -643,7 +643,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
       case 'drag':
         return (
           <div key={col.key} className={`flex items-center justify-center px-2 ${borderClasses}`} style={{ width: col.width }}>
-            <div className="w-4 h-4 opacity-30 bg-gray-300 rounded"></div>
+            <div className="w-4 h-4 opacity-30 bg-gray-300 rounded-sm"></div>
           </div>
         );
       
@@ -689,7 +689,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
         // For non-essential columns, show minimal placeholder
         return (
           <div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
-            <div className={`w-6 h-3 rounded ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
+            <div className={`w-6 h-3 rounded-sm ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
           </div>
         );
     }

worklenz-frontend/src/components/task-management/task-status-dropdown.tsx

@@ -144,7 +144,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
           ref={dropdownRef}
           className={`
             fixed min-w-[160px] max-w-[220px] 
-            rounded border backdrop-blur-sm z-[9999]
+            rounded border backdrop-blur-xs z-9999
             ${isDarkMode 
               ? 'bg-gray-900/95 border-gray-600 shadow-2xl shadow-black/50' 
               : 'bg-white/95 border-gray-200 shadow-2xl shadow-gray-500/20'
@@ -185,7 +185,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
                 >
                   {/* Status Color Indicator */}
                   <div 
-                    className={`w-3 h-3 rounded-full shadow-sm border-2 ${
+                    className={`w-3 h-3 rounded-full shadow-xs border-2 ${
                       isDarkMode ? 'border-gray-800/30' : 'border-white/20'
                     }`}
                     style={{ backgroundColor: getStatusColor(status) }}

worklenz-frontend/src/index.css

@@ -1,10 +1,27 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap')
-@import url("./styles/customOverrides.css");
+layer(base);
-@import url("./styles/task-management.css");
+@import url('./styles/customOverrides.css') layer(base);
+@import url('./styles/task-management.css') layer(base);
 
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+
-@tailwind utilities;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 .app-loading-container {
   transition: none !important;

worklenz-frontend/src/pages/TaskManagementDemo.tsx

@@ -20,7 +20,7 @@ const TaskManagementDemo: React.FC = () => {
 
   return (
     <Layout className="min-h-screen bg-gray-50">
-      <Header className="bg-white shadow-sm">
+      <Header className="bg-white shadow-xs">
         <div className="max-w-7xl mx-auto px-4">
           <Title level={2} className="mb-0 text-gray-800">
             Enhanced Task Management System

worklenz-frontend/src/pages/projects/project-view-1/roadmap/project-view-roadmap.tsx

@@ -21,7 +21,7 @@ const ProjectViewRoadmap = () => {
 
       <Flex>
         {/* table */}
-        <div className="after:content relative h-fit w-full max-w-[500px] after:absolute after:-right-3 after:top-0 after:z-10 after:min-h-full after:w-3 after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent">
+        <div className="after:content relative h-fit w-full max-w-[500px] after:absolute after:-right-3 after:top-0 after:z-10 after:min-h-full after:w-3 after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent">
           <RoadmapTable />
         </div>
 

worklenz-frontend/src/pages/projects/project-view-1/roadmap/roadmap-table/roadmap-table.tsx

@@ -109,9 +109,9 @@ const RoadmapTable = () => {
   }));
 
   // Layout styles for table and columns
-  const customHeaderColumnStyles = `border px-2 h-[50px] text-left z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
+  const customHeaderColumnStyles = `border px-2 h-[50px] text-left z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:h-[42px] after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
 
-  const customBodyColumnStyles = `border px-2 h-[50px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-transparent border-[#303030]' : 'bg-transparent'}`;
+  const customBodyColumnStyles = `border px-2 h-[50px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10 after:min-h-[40px] after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent ${themeMode === 'dark' ? 'bg-transparent border-[#303030]' : 'bg-transparent'}`;
 
   const rowBackgroundStyles =
     themeMode === 'dark' ? 'even:bg-[#1b1b1b] odd:bg-[#141414]' : 'even:bg-[#f4f4f4] odd:bg-white';

worklenz-frontend/src/pages/projects/project-view-1/roadmap/roadmap-table/roadmap-task-cell.tsx

@@ -24,7 +24,7 @@ const RoadmapTaskCell = ({ task, isSubtask = false }: RoadmapTaskCellProps) => {
     return (
       <button
         onClick={() => dispatch(toggleTaskExpansion(id))}
-        className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
+        className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
       >
         {task.isExpanded ? <DownOutlined /> : <RightOutlined />}
       </button>
@@ -36,7 +36,7 @@ const RoadmapTaskCell = ({ task, isSubtask = false }: RoadmapTaskCellProps) => {
     return !isSubtask ? (
       <button
         onClick={() => dispatch(toggleTaskExpansion(id))}
-        className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
+        className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
       >
         {task.isExpanded ? <DownOutlined /> : <RightOutlined />}
       </button>

worklenz-frontend/src/pages/projects/project-view-1/task-list/table-v2.tsx

@@ -323,7 +323,7 @@ const TaskListTable = ({
         }}
       >
         {activeTask && (
-          <div className="bg-white dark:bg-gray-800 shadow-lg rounded border">
+          <div className="bg-white dark:bg-gray-800 shadow-lg rounded-sm border">
             <DraggableRow
               task={activeTask}
               visibleColumns={visibleColumns}

worklenz-frontend/src/pages/projects/project-view-1/task-list/task-list-instant-task-input/task-list-instant-task-input.tsx

@@ -131,7 +131,7 @@ const TaskListInstantTaskInput = ({
 
   return (
     <div
-      className={`border-t border-b-[1px] border-r-[1px]`}
+      className={`border-t border-b border-r`}
       style={{ borderColor: token.colorBorderSecondary }}
     >
       {isEdit ? (

worklenz-frontend/src/pages/projects/project-view-1/task-list/task-list-table-old/task-list-table-old.tsx

@@ -149,10 +149,10 @@ const TaskListTable = ({
   const customBorderColor = themeMode === 'dark' && ' border-[#303030]';
 
   const customHeaderColumnStyles = (key: string) =>
-    `border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10  after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
+    `border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10  after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
 
   const customBodyColumnStyles = (key: string) =>
-    `border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10  after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
+    `border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10  after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
 
   // function to render the column content based on column key
   const renderColumnContent = (

worklenz-frontend/src/pages/projects/project-view-1/task-list/task-list-table-wrapper/task-list-table-wrapper.tsx

@@ -185,7 +185,7 @@ const TaskListTableWrapper = ({
         </Flex>
         <Collapse
           collapsible="header"
-          className="border-l-[4px]"
+          className="border-l-4"
           bordered={false}
           ghost={true}
           expandIcon={() => null}

worklenz-frontend/src/pages/projects/project-view-1/taskList/statusTables/StatusGroupTables.tsx

@@ -47,10 +47,10 @@ const StatusGroupTables = ({ group }: { group: ITaskListGroup }) => {
       {/* bulk action container ==> used tailwind to recreate the animation */}
       {createPortal(
         <div
-          className={`absolute bottom-0 left-1/2 z-20 -translate-x-1/2 ${selectedTaskIdsList.length > 0 ? 'overflow-visible' : 'h-[1px] overflow-hidden'}`}
+          className={`absolute bottom-0 left-1/2 z-20 -translate-x-1/2 ${selectedTaskIdsList.length > 0 ? 'overflow-visible' : 'h-px overflow-hidden'}`}
         >
           <div
-            className={`${selectedTaskIdsList.length > 0 ? 'bottom-4' : 'bottom-0'} absolute left-1/2 z-[999] -translate-x-1/2 transition-all duration-300`}
+            className={`${selectedTaskIdsList.length > 0 ? 'bottom-4' : 'bottom-0'} absolute left-1/2 z-999 -translate-x-1/2 transition-all duration-300`}
           >
             <BulkTasksActionContainer
               selectedTaskIds={selectedTaskIdsList}

worklenz-frontend/src/pages/projects/project-view-1/taskList/taskListTable/TaskListTable.tsx

@@ -133,10 +133,10 @@ const TaskListTable = ({
   const customBorderColor = themeMode === 'dark' && ' border-[#303030]';
 
   const customHeaderColumnStyles = (key: string) =>
-    `border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10  after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
+    `border px-2 text-left ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10  after:h-[42px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#1d1d1d] border-[#303030]' : 'bg-[#fafafa]'}`;
 
   const customBodyColumnStyles = (key: string) =>
-    `border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10  after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
+    `border px-2 ${key === 'selector' && 'sticky left-0 z-10'} ${key === 'task' && `sticky left-[33px] z-10 after:content after:absolute after:top-0 after:-right-1 after:-z-10  after:min-h-[40px] after:w-1.5 after:bg-transparent ${scrollingTables[tableId] ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent' : ''}`} ${themeMode === 'dark' ? 'bg-[#141414] border-[#303030]' : 'bg-white'}`;
 
   // function to render the column content based on column key
   const renderColumnContent = (

worklenz-frontend/src/pages/projects/project-view-1/taskList/taskListTable/TaskListTableWrapper.tsx

@@ -194,7 +194,7 @@ const TaskListTableWrapper = ({
         </Flex>
         <Collapse
           collapsible="header"
-          className="border-l-[4px]"
+          className="border-l-4"
           bordered={false}
           ghost={true}
           expandIcon={() => null}

worklenz-frontend/src/pages/projects/project-view-1/taskList/taskListTable/taskListTableCells/TaskCell.tsx

@@ -39,7 +39,7 @@ const TaskCell = ({
     return (
       <button
         onClick={() => toggleTaskExpansion(taskId)}
-        className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
+        className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
       >
         {expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
       </button>
@@ -51,7 +51,7 @@ const TaskCell = ({
     return !isSubTask ? (
       <button
         onClick={() => toggleTaskExpansion(taskId)}
-        className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
+        className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
       >
         {expandedTasks.includes(taskId) ? <DownOutlined /> : <RightOutlined />}
       </button>

worklenz-frontend/src/pages/projects/projectView/board/board-section/board-section-container.tsx

@@ -99,7 +99,7 @@ const BoardSectionCardContainer = ({
     <Flex
       gap={16}
       align="flex-start"
-      className="max-w-screen max-h-[620px] min-h-[620px] overflow-x-scroll p-[1px]"
+      className="max-w-screen max-h-[620px] min-h-[620px] overflow-x-scroll p-px"
     >
       <SortableContext
         items={datasource?.map((section: any) => section.id)}

worklenz-frontend/src/pages/projects/projectView/board/board-section/board-sub-task-card/board-create-sub-task-card.tsx

@@ -148,7 +148,7 @@ const BoardCreateSubtaskCard = ({
         cursor: 'pointer',
         overflow: 'hidden',
       }}
-      className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
+      className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
       onBlur={handleCancelNewCard}
     >
       <Input

worklenz-frontend/src/pages/projects/projectView/board/board-section/board-task-card/board-view-create-task-card.tsx

@@ -207,7 +207,7 @@ const BoardViewCreateTaskCard = ({
         cursor: 'pointer',
         overflow: 'hidden',
       }}
-      className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline`}
+      className={`outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid`}
       onBlur={handleCancelNewCard}
     >
       <Input

worklenz-frontend/src/pages/projects/projectView/board/board-section/board-task-card/board-view-task-card.tsx

@@ -271,7 +271,7 @@ const BoardViewTaskCard = ({ task, sectionId }: IBoardViewTaskCardProps) => {
         cursor: 'grab',
         overflow: 'hidden',
       }}
-      className={`group outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline board-task-card`}
+      className={`group outline-1 ${themeWiseColor('outline-[#edeae9]', 'outline-[#6a696a]', themeMode)} hover:outline-solid board-task-card`}
       data-id={task.id}
       data-dragging={isDragging ? "true" : "false"}
     >

worklenz-frontend/src/pages/projects/projectView/insights/insights-members/tables/tasks-by-members.tsx

@@ -103,7 +103,7 @@ const TaskByMembersTable = () => {
 
   return (
     <div className="memberList-container min-h-0 max-w-full overflow-x-auto">
-      <table className="w-full min-w-max border-collapse rounded">
+      <table className="w-full min-w-max border-collapse rounded-sm">
         <thead
           style={{
             height: 42,

worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-list-table-cells/task-list-task-cell/task-list-task-cell.tsx

@@ -74,7 +74,7 @@ const TaskListTaskCell = ({
     return (
       <button
         onClick={() => handleToggleExpansion(taskId)}
-        className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
+        className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
       >
         {task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
       </button>
@@ -90,7 +90,7 @@ const TaskListTaskCell = ({
       return (
         <button
           onClick={() => handleToggleExpansion(taskId)}
-          className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
+          className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54]"
         >
           {task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
         </button>
@@ -100,7 +100,7 @@ const TaskListTaskCell = ({
     return !isSubTask ? (
       <button
         onClick={() => handleToggleExpansion(taskId)}
-        className="hover flex h-4 w-4 items-center justify-center rounded text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] open-task-button"
+        className="hover flex h-4 w-4 items-center justify-center rounded-sm text-[12px] hover:border hover:border-[#5587f5] hover:bg-[#d0eefa54] open-task-button"
       >
         {task.show_sub_tasks ? <DownOutlined /> : <RightOutlined />}
       </button>

worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-list-table.tsx

@@ -178,13 +178,13 @@ const CustomCell = React.memo(({
       switch (column.key) {
         case 'STATUS':
           return (
-            <div className="px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
+            <div className="px-2 py-1 text-xs rounded-sm bg-gray-100 text-gray-600">
               {task.status_name || task.status || 'To Do'}
             </div>
           );
         case 'PRIORITY':
           return (
-            <div className="px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
+            <div className="px-2 py-1 text-xs rounded-sm bg-gray-100 text-gray-600">
               {task.priority_name || task.priority || 'Medium'}
             </div>
           );
@@ -213,13 +213,13 @@ const CustomCell = React.memo(({
     switch (column.key) {
       case 'STATUS':
         return (
-          <div className="px-2 py-1 text-xs rounded bg-red-100 text-red-600">
+          <div className="px-2 py-1 text-xs rounded-sm bg-red-100 text-red-600">
             {task.status_name || task.status || 'Error'}
           </div>
         );
       case 'PRIORITY':
         return (
-          <div className="px-2 py-1 text-xs rounded bg-red-100 text-red-600">
+          <div className="px-2 py-1 text-xs rounded-sm bg-red-100 text-red-600">
             {task.priority_name || task.priority || 'Error'}
           </div>
         );
@@ -1483,7 +1483,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
         case 'TASK':
           return `sticky left-[48px] z-10 after:content after:absolute after:top-0 after:-right-1 after:h-full after:-z-10 after:w-1.5 after:bg-transparent ${
             scrollingTables[tableId]
-              ? 'after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent'
+              ? 'after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent'
               : ''
           }`;
         default:
@@ -1886,7 +1886,7 @@ const TaskListTable: React.FC<TaskListTableProps> = ({ taskList, tableId, active
         dropAnimation={null} // Disable drop animation
       >
         {dragActiveId ? (
-          <div className="bg-white dark:bg-gray-800 shadow-lg rounded border p-2 opacity-90">
+          <div className="bg-white dark:bg-gray-800 shadow-lg rounded-sm border p-2 opacity-90">
             <span className="text-sm font-medium">Moving task...</span>
           </div>
         ) : null}

worklenz-frontend/src/pages/schedule/grant-chart.tsx

@@ -409,7 +409,7 @@
 //                                 i >= startOffset &&
 //                                 i < startOffset + projectDuration
 //                                   ? 'empty-cell-hide'
-//                                   : `empty-cell rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/25' : 'outline-black/25'}`
+//                                   : `empty-cell rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/25' : 'outline-black/25'}`
 //                               }
 //                               key={i}
 //                               style={{
@@ -687,7 +687,7 @@ export default Grant;
 //         style={{
 //           background: themeWiseColor('#fff', '#141414', themeMode),
 //         }}
-//         className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-gradient-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
+//         className={`after:content relative z-10 after:absolute after:-right-1 after:top-0 after:-z-10 after:h-full after:w-1.5 after:bg-transparent after:bg-linear-to-r after:from-[rgba(0,0,0,0.12)] after:to-transparent`}
 //       >
 //         <GranttMembersTable
 //           members={members}
@@ -874,7 +874,7 @@ export default Grant;
 //                               i >= startOffset &&
 //                               i < startOffset + projectDuration
 //                                 ? 'empty-cell-hide'
-//                                 : `empty-cell rounded-sm outline-1 hover:outline ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`
+//                                 : `empty-cell rounded-xs outline-1 hover:outline-solid ${themeMode === 'dark' ? 'outline-white/10' : 'outline-black/10'}`
 //                             }
 //                             key={i}
 //                             style={{

worklenz-frontend/tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};