feat: integrate Tailwind CSS Vite plugin and update styles

chrisreddington · web-flow · commit 7954b80eac3b · 2025-05-08T17:31:35.000Z
- Added @tailwindcss/vite to package.json and configured it in vite.config.js.
- Removed unused PostCSS configuration for Tailwind.
- Deleted App.css as it was no longer needed.
- Updated App.jsx to use bg-gradient-to-br for background styling.
- Refactored TaskBoard component to use a grid layout for task lists.
- Adjusted TaskManager and TaskItem components for improved styling and layout.
- Enhanced TaskList component with flexbox for better spacing.
- Updated index.css to include new color scales and improved styling for checkboxes.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@headlessui/react": "^2.2.2",
     "@heroicons/react": "^2.2.0",
     "@tailwindcss/postcss": "^4.1.5",
+    "@tailwindcss/vite": "^4.1.5",
     "framer-motion": "^12.10.4",
     "postcss": "^8.4.31",
     "react": "^19.1.0",
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-}
+  plugins: {},
+};
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,7 +16,7 @@ function App() {
     <TaskProvider>
       <TagProvider>
         <ListProvider>
-          <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="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="w-full max-w-6xl">
               <motion.div 
                 className="mb-6 bg-white rounded-2xl shadow-soft p-6"
diff --git a/src/features/lists/components/TaskBoard.jsx b/src/features/lists/components/TaskBoard.jsx
@@ -110,7 +110,7 @@ function TaskBoard() {
         )}
       </AnimatePresence>
 
-      <div className="flex flex-wrap gap-4" data-testid="task-lists-container">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(20rem,1fr))] gap-4" data-testid="task-lists-container">
         {taskLists.map(list => {
           const filteredTasks = getFilteredTasks(list.filters, tasks);
           const completedTasksCount = filteredTasks.filter(task => task.isCompleted).length;
@@ -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 shrink-0 flex flex-col"
+              className="task-list-container bg-white rounded-xl shadow-soft w-full 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-sm"
+                        className="text-xs font-medium text-neutral-500 bg-neutral-100 px-2 py-0.5 rounded-xs"
                         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-sm"
+                        className="text-sm text-neutral-500 hover:text-neutral-700 px-2 py-1 hover:bg-neutral-100 rounded-xs"
                         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-sm"
+                          className="text-sm text-rose-500 hover:text-rose-700 px-2 py-1 hover:bg-rose-50 rounded-xs"
                           onClick={() => deleteTaskList(list.id)}
                           data-testid={`delete-list-${list.id}`}
                         >
@@ -224,7 +224,7 @@ function TaskBoard() {
         {/* Add new task list button */}
         <motion.button
           type="button"
-          className="add-list-button w-full md:w-[calc(50%-0.5rem)] lg:w-80 h-48 rounded-xl border-2 border-dashed border-neutral-200 flex flex-col items-center justify-center text-neutral-400 hover:text-primary-600 hover:border-primary-300 transition-colors"
+          className="add-list-button h-48 rounded-xl border-2 border-dashed border-neutral-200 flex flex-col items-center justify-center text-neutral-400 hover:text-primary-600 hover:border-primary-300 transition-colors"
           onClick={addTaskList}
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
diff --git a/src/features/tags/components/TagManager.jsx b/src/features/tags/components/TagManager.jsx
@@ -87,7 +87,7 @@ function TagManager({ onClose }) {
       </div>
 
       {/* Tag list */}
-      <div className="space-y-2 max-h-64 overflow-y-auto" data-testid="tag-list">
+      <div className="flex flex-col gap-2 max-h-64 overflow-y-auto" data-testid="tag-list">
         {tags.length === 0 ? (
           <p className="text-center text-neutral-500 py-3" data-testid="no-tags-message">No tags yet</p>
         ) : (
@@ -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-sm focus:outline-hidden focus:ring-1 focus:ring-primary-500"
+                  className="w-full py-1 px-2 text-sm border border-primary-300 rounded-xs focus:outline-hidden focus:ring-1 focus:ring-primary-500"
                   autoFocus
                   data-testid="edit-tag-input"
                 />
diff --git a/src/features/tasks/components/TaskItem.jsx b/src/features/tasks/components/TaskItem.jsx
@@ -12,10 +12,10 @@ function TaskItem({ task }) {
         task.isCompleted 
           ? 'border-green-100 bg-green-50' 
           : 'border-neutral-100 hover:border-primary-100 bg-white hover:bg-primary-50/30'
-      } p-4 shadow-sm hover:shadow-md transition-all duration-200`}
+      } p-4 shadow-xs hover:shadow-md transition-all duration-200`}
     >
       <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-3">
+        <div className="flex items-center gap-3">
           <div className="checkbox-container" onClick={() => toggleTask(task.id)}>
             <input 
               type="checkbox" 
diff --git a/src/features/tasks/components/TaskList.jsx b/src/features/tasks/components/TaskList.jsx
@@ -4,7 +4,7 @@ import TaskItem from './TaskItem';
 
 function TaskList({ tasks }) {
   return (
-    <div className="task-list space-y-2" data-testid="task-list">
+    <div className="task-list flex flex-col gap-2" data-testid="task-list">
       <AnimatePresence>
         {tasks.length > 0 ? (
           tasks.map((task) => (
diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,6 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap')
-layer(utilities);
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 @theme {
   --color-primary-50: #f0f9ff;
@@ -40,6 +39,26 @@ layer(utilities);
   --color-neutral-900: #18181b;
   --color-neutral-950: #09090b;
 
+  /* Added green color scale */
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+
+  /* Added rose color scale */
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+
+  /* Added blue color scale (for non-primary blue uses) */
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-700: #1d4ed8;
+
   --font-sans:
     Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
     Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
@@ -62,7 +81,19 @@ layer(utilities);
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
+    border-color: var(--color-neutral-200, currentcolor); /* Changed from gray-200 to neutral-200 */
+  }
+
+  /* Restore v3 placeholder color behavior */
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-neutral-400, currentColor); /* Using neutral-400 from theme */
+  }
+
+  /* Restore v3 button cursor behavior */
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
   }
 }
 
@@ -108,18 +139,41 @@ code {
 }
 
 .checkbox-container {
-  @apply relative flex items-center;
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .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-hidden transition-colors duration-200 ease-in-out;
+  appearance: none;
+  height: 1.25rem; /* h-5 */
+  width: 1.25rem; /* w-5 */
+  border-radius: 0.375rem; /* rounded-md */
+  border: 1px solid var(--color-neutral-300); /* border-gray-300 (using neutral as per theme) */
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.checkbox-container input[type="checkbox"]:checked {
+  background-color: var(--color-primary-500);
+  border-color: transparent;
+}
+
+.checkbox-container input[type="checkbox"]:focus {
+  outline-style: hidden; /* focus:outline-hidden */
 }
 
 .checkbox-container .checkmark {
-  @apply absolute left-[3px] top-[5px] opacity-0 transition-opacity pointer-events-none;
+  position: absolute;
+  left: 3px;
+  top: 5px;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
 }
 
 .checkbox-container input[type="checkbox"]:checked ~ .checkmark {
-  @apply opacity-100;
+  opacity: 1;
 }
diff --git a/vite.config.js b/vite.config.js
@@ -1,10 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite"; // Import the new Tailwind CSS Vite plugin
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: '',
-  plugins: [react()],
+  plugins: [
+    react(),
+    tailwindcss(), // Add the Tailwind CSS Vite plugin
+  ],
   test: {
     globals: true,
     environment: 'jsdom',
