Create a todo app. The primary features include:
- The app uses Tailwind CSS for styling throughout (update package.json and add a default tailwind.config.js and postcss.config.js)
- It displays a list of tasks which are either completed (Apply tailwind styling such as line-through or bg-green-100) and uncompleted.
- A user should be able to toggle tasks between a completed and uncompleted state.
- If a task is completed, a user should be able to delete the task using a button.
- The user can add new tasks using an input box and the enter button.
- If no tasks are in the list, add placeholder text to say "All tasks are complete!"
- The uses different components for different parts (e.g. AddTask, TaskList, TaskItem)

Follow up prompts could be like Index.css

• Use light theme
• Background is light blue
• Create a class "complete-button" with green background.
• Create a class "delete-button" with red background.

App.jsx

• Add a "complete all" button that completes all tasks. Use the "complete-button" class
• Add a "delete completed" button that deletes all completed tasks. Use the "delete-button" class.

Welcome to your shiny new Codespace running React! We've got everything fired up and running for you to explore React.

You've got a blank canvas to work on from a git perspective as well. There's a single initial commit with the what you're seeing right now - where you go from here is up to you!

Everything you do here is contained within this one codespace. There is no repository on GitHub yet. If and when you’re ready you can click "Publish Branch" and we’ll create your repository and push up your project. If you were just exploring then and have no further need for this code then you can simply delete your codespace and it's gone forever.

This project was bootstrapped for you with Vite.

In the project directory, you can run:

We've already run this for you in the Codespaces: server terminal window below. If you need to stop the server for any reason you can just run npm start again to bring it back online.

Runs the app in the development mode.
Open http://localhost:3000/ in the built-in Simple Browser (Cmd/Ctrl + Shift + P > Simple Browser: Show) to view your running application.

The page will reload automatically when you make changes.
You may also see any lint errors in the console.

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

You can learn more in the Vite documentation.

To learn Vitest, a Vite-native testing framework, go to Vitest documentation

To learn React, check out the React documentation.

This section has moved here: https://sambitsahoo.com/blog/vite-code-splitting-that-works.html

This section has moved here: https://github.com/btd/rollup-plugin-visualizer#rollup-plugin-visualizer

This section has moved here: https://dev.to/hamdankhan364/simplifying-progressive-web-app-pwa-development-with-vite-a-beginners-guide-38cf

This section has moved here: https://vitejs.dev/guide/build.html#advanced-base-options

This section has moved here: https://vitejs.dev/guide/build.html

This section has moved here: https://vitejs.dev/guide/troubleshooting.html