8000 feat: integrate Tailwind CSS Vite plugin and update styles · github-samples/task-dashboard@7954b80 · GitHub
[go: up one dir, main page]
Skip to content

Commit 7954b80

Browse files
chrisreddingtonchrisreddington
authored
feat: integrate Tailwind CSS Vite plugin and update styles
- 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.
1 parent 272d95d commit 7954b80

File tree

11 files changed

+125
-198
lines changed

11 files changed

+125
-198
lines changed

‎package-lock.json

Lines changed: 42 additions & 141 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@headlessui/react": "^2.2.2",
77
"@heroicons/react": "^2.2.0",
88
"@tailwindcss/postcss": "^4.1.5",
9+
"@tailwindcss/vite": "^4.1.5",
910
"framer-motion": "^12.10.4",
1011
"postcss": "^8.4.31",
1112
"react": "^19.1.0",

‎postcss.config.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
module.exports = {
2-
plugins: {
3-
'@tailwindcss/postcss': {},
4-
},
5-
}
2+
plugins: {},
3+
};

‎src/App.css

Lines changed: 0 additions & 31 deletions

‎src/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function App() {
1616
<TaskProvider>
1717
<TagProvider>
1818
<ListProvider>
19-
<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">
19+
<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">
2020
<div className="w-full max-w-6xl">
2121
<motion.div
2222
className="mb-6 bg-white rounded-2xl shadow-soft p-6"

‎src/features/lists/components/TaskBoard.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function TaskBoard() {
110110
)}
111111
</AnimatePresence>
112112

113-
<div className="flex flex-wrap gap-4" data-testid="task-lists-container">
113+
<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">
114114
{taskLists.map(list => {
115115
const filteredTasks = getFilteredTasks(list.filters, tasks);
116116
const completedTasksCount = filteredTasks.filter(task => task.isCompleted).length;
@@ -120,7 +120,7 @@ function TaskBoard() {
120120
return (
121121
<div
122122
key={list.id}
123-
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"
123+
className="task-list-container bg-white rounded-xl shadow-soft w-full flex flex-col"
124124
data-testid={`task-list-${list.id}`}
125125
>
126126
{editingListId === list.id ? (
@@ -135,14 +135,14 @@ function TaskBoard() {
135135
<h2 className="font-medium text-lg" data-testid={`list-title-${list.id}`}>{list.title}</h2>
136136
<div className="flex items-center gap-2">
137137
<span
138-
className="text-xs font-medium text-neutral-500 bg-neutral-100 px-2 py-0.5 rounded-sm"
138+
className="text-xs font-medium text-neutral-500 bg-neutral-100 px-2 py-0.5 rounded-xs"
139139
data-testid={`task-count-${list.id}`}
140140
>
141141
{completedTasksCount}/{filteredTasks.length}
142142
</span>
143143
<button
144144
type="button"
145-
className="text-sm text-neutral-500 hover:text-neutral-700 px-2 py-1 hover:bg-neutral-100 rounded-sm"
145+
className="text-sm text-neutral-500 hover:text-neutral-700 px-2 py-1 hover:bg-neutral-100 rounded-xs"
146146
onClick={() => handleEditTaskList(list.id)}
147147
data-testid={`edit-list-${list.id}`}
148148
>
@@ -151,7 +151,7 @@ function TaskBoard() {
151151
{list.id !== 'default' && (
152152
<button
153153
type="button"
154-
className="text-sm text-rose-500 hover:text-rose-700 px-2 py-1 hover:bg-rose-50 rounded-sm"
154+
className="text-sm text-rose-500 hover:text-rose-700 px-2 py-1 hover:bg-rose-50 rounded-xs"
155155
onClick={() => deleteTaskList(list.id)}
156156
data-testid={`delete-list-${list.id}`}
157157
>
@@ -224,7 +224,7 @@ function TaskBoard() {
224224
{/* Add new task list button */}
225225
<motion.button
226226
type="button"
227-
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"
227+
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"
228228
onClick={addTaskList}
229229
whileHover={{ scale: 1.02 }}
230230
whileTap={{ scale: 0.98 }}

‎src/features/tags/components/TagManager.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function TagManager({ onClose }) {
8787
</div>
8888

8989
{/* Tag list */}
90-
<div className="space-y-2 max-h-64 overflow-y-auto" data-testid="tag-list">
90+
<div className="flex flex-col gap-2 max-h-64 overflow-y-auto" data-testid="tag-list">
9191
{tags.length === 0 ? (
9292
<p className="text-center text-neutral-500 py-3" data-testid="no-tags-message">No tags yet</p>
9393
) : (
@@ -102,7 +102,7 @@ function TagManager({ onClose }) {
102102
type="text"
103103
value={editedTagName}
104104
onChange={(e) => setEditedTagName(e.target.value)}
105-
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"
105+
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"
106106
autoFocus
107107
data-testid="edit-tag-input"
108108
/>

‎src/features/tasks/components/TaskItem.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ function TaskItem({ task }) {
1212
task.isCompleted
1313
? 'border-green-100 bg-green-50'
1414
: 'border-neutral-100 hover:border-primary-100 bg-white hover:bg-primary-50/30'
15-
} p-4 shadow-sm hover:shadow-md transition-all duration-200`}
15+
} p-4 shadow-xs hover:shadow-md transition-all duration-200`}
1616
>
1717
<div className="flex items-center justify-between">
18-
<div className="flex items-center space-x-3">
18+
<div className="flex items-center gap-3">
1919
<div className="checkbox-container" onClick={() => toggleTask(task.id)}>
2020
<input
2121
type="checkbox"

‎src/features/tasks/components/TaskList.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import TaskItem from './TaskItem';
44

55
function TaskList({ tasks }) {
66
return (
7-
<div className="task-list space-y-2" data-testid="task-list">
7+
<div className="task-list flex flex-col gap-2" data-testid="task-list">
88
<AnimatePresence>
99
{tasks.length > 0 ? (
1010
tasks.map((task) => (

‎src/index.css

Lines changed: 63 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
@import 'tailwindcss';
1+
@import "tailwindcss";
22

3-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap')
4-
layer(utilities);
3+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
54

65
@theme {
76
--color-primary-50: #f0f9ff;
@@ -40,6 +39,26 @@ layer(utilities);
4039
--color-neutral-900: #18181b;
4140
--color-neutral-950: #09090b;
4241

42+
/* Added green color scale */
43+
--color-green-50: #f0fdf4;
44+
--color-green-100: #dcfce7;
45+
--color-green-200: #bbf7d0;
46+
--color-green-600: #16a34a;
47+
--color-green-700: #15803d;
48+
49+
/* Added rose color scale */
50+
--color-rose-50: #fff1f2;
51+
--color-rose-100: #ffe4e6;
52+
--color-rose-200: #fecdd3;
53+
--color-rose-500: #f43f5e;
54+
--color-rose-600: #e11d48;
55+
--color-rose-700: #be123c;
56+
57+
/* Added blue color scale (for non-primary blue uses) */
58+
--color-blue-100: #dbeafe;
59+
--color-blue-200: #bfdbfe;
60+
--color-blue-700: #1d4ed8;
61+
4362
--font-sans:
4463
Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
4564
Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
@@ -62,7 +81,19 @@ layer(utilities);
6281
::before,
6382
::backdrop,
6483
::file-selector-button {
65-
border-color: var(--color-gray-200, currentcolor);
84+
border-color: var(--color-neutral-200, currentcolor); /* Changed from gray-200 to neutral-200 */
85+
}
86+
87+
/* Restore v3 placeholder color behavior */
88+
input::placeholder,
89+
textarea::placeholder {
90+
color: var(--color-neutral-400, currentColor); /* Using neutral-400 from theme */
91+
}
92+
93+
/* Restore v3 button cursor behavior */
94+
button:not(:disabled),
95+
[role="button"]:not(:disabled) {
96+
cursor: pointer;
6697
}
6798
}
6899

@@ -108,18 +139,41 @@ code {
108139
}
109140

110141
.checkbox-container {
111-
@apply relative flex items-center;
142+
position: relative;
143+
display: flex;
144+
align-items: center;
112145
}
113146

114147
.checkbox-container input[type="checkbox"] {
115-
@apply appearance-none h-5 w-5 rounded-md border border-gray-300 checked:bg-primary-500
116-
checked:border-transparent focus:outline-hidden transition-colors duration-200 ease-in-out;
148+
appearance: none;
149+
height: 1.25rem; /* h-5 */
150+
width: 1.25rem; /* w-5 */
151+
border-radius: 0.375rem; /* rounded-md */
152+
border: 1px solid var(--color-neutral-300); /* border-gray-300 (using neutral as per theme) */
153+
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
154+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
155+
transition-duration: 200ms;
156+
}
157+
158+
.checkbox-container input[type="checkbox"]:checked {
159+
background-color: var(--color-primary-500);
160+
border-color: transparent;
161+
}
162+
163+
.checkbox-container input[type="checkbox"]:focus {
164+
outline-style: hidden; /* focus:outline-hidden */
117165
}
118166

119167
.checkbox-container .checkmark {
120-
@apply absolute left-[3px] top-[5px] opacity-0 transition-opacity pointer-events-none;
168+
position: absolute;
169+
left: 3px;
170+
top: 5px;
171+
opacity: 0;
172+
transition-property: opacity;
173+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
174+
pointer-events: none;
121175
}
122176

123177
.checkbox-container input[type="checkbox"]:checked ~ .checkmark {
124-
@apply opacity-100;
178+
opacity: 1;
125179
}

0 commit comments

Comments
 (0)
0