chore(dependencies): update Tailwind CSS and related configurations

- Removed @tailwindcss/postcss from devDependencies and updated tailwindcss to version 3.4.15 for improved styling.
- Added autoprefixer as a new dependency to enhance CSS compatibility.
- Updated postcss.config.js to reflect the new Tailwind CSS plugin structure.
- Created a new tailwind.config.js file to define Tailwind's configuration.
- Adjusted CSS imports in index.css to utilize Tailwind's utility classes.
- Refined focus styles across various components for better accessibility and visual consistency.

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

@@ -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-hidden focus:ring-1 focus:ring-blue-500
+            focus:outline-none focus:ring-1 focus:ring-blue-500
           `}
         />
       </div>

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

@@ -394,7 +394,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-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
           ${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
         `}
         aria-expanded={isOpen}
@@ -414,7 +414,7 @@ const FilterDropdown: React.FC<{
 
       {/* Dropdown Panel */}
       {isOpen && (
-        <div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-lg border ${themeClasses.dropdownBorder}`}>
+        <div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}>
           {/* Search Input */}
           {section.searchable && (
             <div className={`p-2 border-b ${themeClasses.dividerBorder}`}>
@@ -546,7 +546,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} ${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
+          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-2 ${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText} ${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'
             }`}
         >
           <SearchOutlined className="w-3.5 h-3.5" />
@@ -579,7 +579,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-hidden 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-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
           >
             Search
           </button>
@@ -646,7 +646,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-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
           ${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
         `}
         aria-expanded={open}
@@ -666,7 +666,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
 
       {/* Dropdown Panel - matching FilterDropdown style */}
       {open && (
-        <div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-lg border ${themeClasses.dropdownBorder}`}>
+        <div className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}>
           {/* Options List */}
           <div className="max-h-48 overflow-y-auto">
             {sortedFields.length === 0 ? (
@@ -1037,7 +1037,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
   }, [dispatch, projectId, position, showArchived]);
 
   return (
-    <div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-xs ${className}`}>
+    <div className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-3 shadow-sm ${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

@@ -187,7 +187,7 @@ const TaskPhaseDropdown: React.FC<TaskPhaseDropdownProps> = ({
               
               {/* No Phase Color Indicator */}
               <div 
-                className={`w-3 h-3 rounded-full shadow-xs border-2 ${
+                className={`w-3 h-3 rounded-full shadow-sm 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-xs border-2 ${
+                    className={`w-3 h-3 rounded-full shadow-sm border-2 ${
                       isDarkMode ? 'border-gray-800/30' : 'border-white/20'
                     }`}
                     style={{ backgroundColor: getPhaseColor(phase) }}

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

@@ -193,7 +193,7 @@ const TaskPriorityDropdown: React.FC<TaskPriorityDropdownProps> = ({
                   
                   {/* Priority Color Indicator */}
                   <div 
-                    className={`w-3 h-3 rounded-full shadow-xs border-2 ${
+                    className={`w-3 h-3 rounded-full shadow-sm border-2 ${
                       isDarkMode ? 'border-gray-800/30' : 'border-white/20'
                     }`}
                     style={{ backgroundColor: getPriorityColor(priority) }}

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

@@ -185,7 +185,7 @@ const TaskStatusDropdown: React.FC<TaskStatusDropdownProps> = ({
                 >
                   {/* Status Color Indicator */}
                   <div 
-                    className={`w-3 h-3 rounded-full shadow-xs border-2 ${
+                    className={`w-3 h-3 rounded-full shadow-sm border-2 ${
                       isDarkMode ? 'border-gray-800/30' : 'border-white/20'
                     }`}
                     style={{ backgroundColor: getStatusColor(status) }}