refactor: update Tailwind CSS configuration and styles

- Replaced autoprefixer with @tailwindcss/postcss in package.json and postcss.config.js.
- Upgraded Tailwind CSS to version 4.1.5.
- Updated various class names in components to align with new Tailwind CSS utility classes.
- Removed tailwind.config.js and migrated theme colors and styles to index.css.
- Adjusted input and button styles across components for consistency with new utility classes.

Author: chrisreddington

package-lock.json

@@ -5,12 +5,12 @@
   "dependencies": {
     "@headlessui/react": "^2.2.2",
     "@heroicons/react": "^2.2.0",
-    "autoprefixer": "^10.4.7",
+    "@tailwindcss/postcss": "^4.1.5",
     "framer-motion": "^12.10.4",
     "postcss": "^8.4.31",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "tailwindcss": "^3.1.8",
+    "tailwindcss": "^4.1.5",
     "web-vitals": "^5.0.0"
   },
   "overrides": {

package.json

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

postcss.config.js

@@ -16,7 +16,7 @@ function App() {
     <TaskProvider>
       <TagProvider>
         <ListProvider>
-          <div className="App min-h-screen bg-gradient-to-br from-primary-50 to-secondary-50 flex flex-col items-center py-12 px-4" data-testid="app">
+          <div className="App min-h-screen bg-linear-to-br from-primary-50 to-secondary-50 flex flex-col items-center py-12 px-4" data-testid="app">
             <div className="w-full max-w-6xl">
               <motion.div 
                 className="mb-6 bg-white rounded-2xl shadow-soft p-6"

src/App.jsx

@@ -48,7 +48,7 @@ function ListAddTask({ onCancel, listFilters }) {
           placeholder="Add a task to this list..."
           value={text}
           onChange={(e) => setText(e.target.value)}
-          className="w-full py-2 px-4 pr-20 text-sm text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none transition-all"
+          className="w-full py-2 px-4 pr-20 text-sm text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
           autoComplete="off"
           data-testid="list-task-input"
         />

src/features/lists/components/ListAddTask.jsx

@@ -120,7 +120,7 @@ function TaskBoard() {
           return (
             <div 
               key={list.id} 
-              className="task-list-container bg-white rounded-xl shadow-soft w-full md:w-[calc(50%-0.5rem)] lg:w-80 flex-shrink-0 flex flex-col"
+              className="task-list-container bg-white rounded-xl shadow-soft w-full md:w-[calc(50%-0.5rem)] lg:w-80 shrink-0 flex flex-col"
               data-testid={`task-list-${list.id}`}
             >
               {editingListId === list.id ? (
@@ -135,14 +135,14 @@ function TaskBoard() {
                     <h2 className="font-medium text-lg" data-testid={`list-title-${list.id}`}>{list.title}</h2>
                     <div className="flex items-center gap-2">
                       <span 
-                        className="text-xs font-medium text-neutral-500 bg-neutral-100 px-2 py-0.5 rounded"
+                        className="text-xs font-medium text-neutral-500 bg-neutral-100 px-2 py-0.5 rounded-sm"
                         data-testid={`task-count-${list.id}`}
                       >
                         {completedTasksCount}/{filteredTasks.length}
                       </span>
                       <button 
                         type="button"
-                        className="text-sm text-neutral-500 hover:text-neutral-700 px-2 py-1 hover:bg-neutral-100 rounded"
+                        className="text-sm text-neutral-500 hover:text-neutral-700 px-2 py-1 hover:bg-neutral-100 rounded-sm"
                         onClick={() => handleEditTaskList(list.id)}
                         data-testid={`edit-list-${list.id}`}
                       >
@@ -151,7 +151,7 @@ function TaskBoard() {
                       {list.id !== 'default' && (
                         <button 
                           type="button"
-                          className="text-sm text-rose-500 hover:text-rose-700 px-2 py-1 hover:bg-rose-50 rounded"
+                          className="text-sm text-rose-500 hover:text-rose-700 px-2 py-1 hover:bg-rose-50 rounded-sm"
                           onClick={() => deleteTaskList(list.id)}
                           data-testid={`delete-list-${list.id}`}
                         >
@@ -161,7 +161,7 @@ function TaskBoard() {
                     </div>
                   </div>
 
-                  <div className="list-body p-4 flex-grow overflow-y-auto max-h-[50vh]">
+                  <div className="list-body p-4 grow overflow-y-auto max-h-[50vh]">
                     {/* Show add task form when adding to this list */}
                     {addingTaskToListId === list.id ? (
                       <div className="mb-3">

src/features/lists/components/TaskBoard.jsx

@@ -46,7 +46,7 @@ function TaskListConfig({ taskList, onSave, onCancel }) {
           type="text"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500"
+          className="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-hidden focus:ring-1 focus:ring-primary-500"
           placeholder="Enter list title"
           data-testid="list-title-input"
         />

src/features/lists/components/TaskListConfig.jsx

@@ -57,7 +57,7 @@ function TagManager({ onClose }) {
       {/* Add new tag */}
       <div className="mb-5">
         <div className="flex gap-2">
-          <div className="relative flex-grow">
+          <div className="relative grow">
             <div className="absolute left-3 top-1/2 -translate-y-1/2">
               <TagIcon className="h-4 w-4 text-neutral-500" />
             </div>
@@ -66,7 +66,7 @@ function TagManager({ onClose }) {
               placeholder="Add a new tag"
               value={newTagName}
               onChange={(e) => setNewTagName(e.target.value)}
-              className="w-full py-2 px-4 pl-9 text-sm text-neutral-800 rounded-lg border border-neutral-300 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none transition-all"
+              className="w-full py-2 px-4 pl-9 text-sm text-neutral-800 rounded-lg border border-neutral-300 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
               data-testid="new-tag-input"
             />
           </div>
@@ -102,7 +102,7 @@ function TagManager({ onClose }) {
                   type="text"
                   value={editedTagName}
                   onChange={(e) => setEditedTagName(e.target.value)}
-                  className="w-full py-1 px-2 text-sm border border-primary-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500"
+                  className="w-full py-1 px-2 text-sm border border-primary-300 rounded-sm focus:outline-hidden focus:ring-1 focus:ring-primary-500"
                   autoFocus
                   data-testid="edit-tag-input"
                 />

src/features/tags/components/TagManager.jsx

@@ -80,7 +80,7 @@ function GlobalTaskForm({ onCancel }) {
           placeholder="What needs to be done?"
           value={text}
           onChange={(e) => setText(e.target.value)}
-          className="w-full py-3 px-4 pr-24 text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-2 focus:ring-primary-200 outline-none transition-all"
+          className="w-full py-3 px-4 pr-24 text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-2 focus:ring-primary-200 outline-hidden transition-all"
           autoComplete="off"
           data-testid="task-input"
         />
@@ -122,7 +122,7 @@ function GlobalTaskForm({ onCancel }) {
             value={newTagInput}
             onChange={(e) => setNewTagInput(e.target.value)}
             onKeyDown={handleTagKeyDown}
-            className="w-full py-3 px-4 pl-9 text-sm text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none transition-all"
+            className="w-full py-3 px-4 pl-9 text-sm text-neutral-800 rounded-lg border border-neutral-200 focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-hidden transition-all"
             autoComplete="off"
             data-testid="tag-input"
           />

src/features/tasks/components/GlobalTaskForm.jsx

@@ -1,8 +1,70 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap')
+layer(utilities);
+
+@theme {
+  --color-primary-50: #f0f9ff;
+  --color-primary-100: #e0f2fe;
+  --color-primary-200: #bae6fd;
+  --color-primary-300: #7dd3fc;
+  --color-primary-400: #38bdf8;
+  --color-primary-500: #0ea5e9;
+  --color-primary-600: #0284c7;
+  --color-primary-700: #0369a1;
+  --color-primary-800: #075985;
+  --color-primary-900: #0c4a6e;
+  --color-primary-950: #082f49;
+
+  --color-secondary-50: #fdf4ff;
+  --color-secondary-100: #fae8ff;
+  --color-secondary-200: #f5d0fe;
+  --color-secondary-300: #f0abfc;
+  --color-secondary-400: #e879f9;
+  --color-secondary-500: #d946ef;
+  --color-secondary-600: #c026d3;
+  --color-secondary-700: #a21caf;
+  --color-secondary-800: #86198f;
+  --color-secondary-900: #701a75;
+  --color-secondary-950: #4a044e;
+
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f5;
+  --color-neutral-200: #e4e4e7;
+  --color-neutral-300: #d4d4d8;
+  --color-neutral-400: #a1a1aa;
+  --color-neutral-500: #71717a;
+  --color-neutral-600: #52525b;
+  --color-neutral-700: #3f3f46;
+  --color-neutral-800: #27272a;
+  --color-neutral-900: #18181b;
+  --color-neutral-950: #09090b;
+
+  --font-sans:
+    Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+
+  --shadow-soft:
+    0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
+}
+
+/*
+  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);
+  }
+}
 
 body {
   margin: 0;
@@ -51,7 +113,7 @@ code {
 
 .checkbox-container input[type="checkbox"] {
   @apply appearance-none h-5 w-5 rounded-md border border-gray-300 checked:bg-primary-500 
-  checked:border-transparent focus:outline-none transition-colors duration-200 ease-in-out;
+  checked:border-transparent focus:outline-hidden transition-colors duration-200 ease-in-out;
 }
 
 .checkbox-container .checkmark {