Building a Simple Task List with Vue and Tailwind CSS

This challenge focuses on integrating Tailwind CSS into a Vue.js application to create a basic task list. You'll be building a user interface where users can add tasks, mark them as complete, and delete them. This exercise reinforces understanding of component-based architecture in Vue and the utility-first approach of Tailwind CSS for styling.

Problem Description

You are tasked with creating a simple task list application using Vue.js and Tailwind CSS. The application should allow users to:

1. Add Tasks: A text input field and an "Add" button should allow users to input a new task and add it to the list.
2. Mark as Complete: Each task should have a checkbox. Checking the checkbox should visually mark the task as complete (e.g., strikethrough the text).
3. Delete Tasks: Each task should have a "Delete" button that removes the task from the list.

The application should be styled using Tailwind CSS classes for a clean and responsive design. The task list should persist in memory (no need for backend storage).

Key Requirements:

• Use Vue.js 3 with TypeScript.
• Utilize Tailwind CSS for all styling. You'll need to set up Tailwind CSS in your Vue project (instructions provided in the Notes section).
• The task list should be displayed in a clear and organized manner.
• The UI should be responsive and look good on different screen sizes.
• The application should be functional and free of major bugs.

Expected Behavior:

• When a new task is added, it should appear at the bottom of the list.
• When a task is marked as complete, its text should be visually styled to indicate completion (e.g., strikethrough).
• When a task is deleted, it should be removed from the list.
• The list should update dynamically as tasks are added, completed, or deleted.

Edge Cases to Consider:

• Empty task input: Handle cases where the user tries to add an empty task (e.g., disable the "Add" button or display an error message).
• Large number of tasks: While not a primary focus, consider how the list will behave with a significant number of tasks.

Examples

Example 1:

Input: Initially, the task list is empty. User enters "Buy groceries" and clicks "Add".
Output: The task list now contains one item: "Buy groceries".
Explanation: The new task is added to the list and displayed.

Example 2:

Input: Task list contains: "Buy groceries", "Walk the dog". User checks the checkbox next to "Buy groceries".
Output: The task "Buy groceries" is displayed with a strikethrough.
Explanation: The checkbox state changes, and the styling reflects the completed status.

Example 3:

Input: Task list contains: "Buy groceries", "Walk the dog". User clicks the "Delete" button next to "Walk the dog".
Output: The task list now contains only "Buy groceries".
Explanation: The task "Walk the dog" is removed from the list.

Constraints

• Project Setup: You are expected to have a basic Vue.js 3 project set up with TypeScript.
• Tailwind CSS Setup: You are expected to have Tailwind CSS properly configured in your project. See the Notes section for setup instructions.
• Data Storage: Data should be stored in memory within the Vue component. No external API calls or database interactions are required.
• Component Count: Aim for a single main component to manage the task list. Smaller, reusable components are encouraged but not strictly required.
• Styling: Use Tailwind CSS classes exclusively for styling. Avoid inline styles or custom CSS.

Notes

1. Tailwind CSS Setup: If you don't already have Tailwind CSS set up, follow these steps:

   • Create a new Vue 3 project with TypeScript: npm create vue@latest my-task-list
   • Navigate into the project directory: cd my-task-list
   • Install Tailwind CSS and its dependencies: npm install -D tailwindcss postcss autoprefixer
   • Initialize Tailwind CSS: npx tailwindcss init -p
   • Configure Tailwind CSS in your src/assets/base.css file:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

   • Add the src/assets/base.css file to your vue.config.js (or vite.config.ts) to be processed by Vue's build system. For example, in vue.config.js:

   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     css: {
       loaderOptions: {
         css: {
           importLoaders: 2,
           preprocessorOptions: {
             postcss: {
               plugins: [
                 require('tailwindcss'),
                 require('autoprefixer'),
               ]
             }
           }
         }
       }
     }
   })
   

   • Run your development server: npm run serve

2. Component Structure: A good starting point is a single component that manages the task list state (array of tasks) and handles adding, completing, and deleting tasks.

3. Accessibility: While not a primary requirement, consider basic accessibility principles (e.g., using appropriate HTML elements, providing labels for form inputs).

4. Focus on Functionality and Styling: The primary goal is to demonstrate your ability to integrate Tailwind CSS into a Vue.js application and create a functional user interface. Don't overcomplicate the application with unnecessary features.