Easy Todo List App with React and Tailwind CSS

In this blog post, I'll walk you through the process of building a simple Todo List application using React and TailwindCSS. This project is perfect for beginners who want to dive deeper into React for managing state and learn how to style components using the utility-first CSS framework, TailwindCSS.

Project Overview

The goal of this project is to create a basic Todo List where users can:

Add new tasks.
Toggle tasks between completed and uncompleted.
Delete tasks they no longer need.

We’ll leverage React’s state management capabilities and style everything using TailwindCSS.

Step1: Setting up the project

To begin, we’ll set up a React project using create-react-app and install TailwindCSS.

Create React App:

npx create-react-app todo-list
cd todo-list

Install TailwindCSS: TailwindCSS needs to be installed along with PostCSS and autoprefixer for automatic browser compatibility.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configure Tailwind: In tailwind.config.js, update the content section to point to your React app’s files:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Include Tailwind in your CSS: In src/index.css, import the TailwindCSS directives:

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

Now, TailwindCSS is fully integrated into our React app!

Step 2: Creating the Todo List Component

Next, let's create a Todo List component where users can add, delete, and toggle tasks.

Here’s the core structure of the TodoList.js component:

import { useState } from 'react';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { text: newTask, completed: false }]);
      setNewTask('');
    }
  };

  const toggleTaskCompletion = (index) => {
    const updatedTasks = tasks.map((task, i) =>
      i === index ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
  };

  const deleteTask = (index) => {
    const updatedTasks = tasks.filter((_, i) => i !== index);
    setTasks(updatedTasks);
  };

  return (
    <div className="max-w-md mx-auto mt-10 p-4 bg-white rounded-lg shadow-lg">
      <h1 className="text-2xl font-bold mb-4">Todo List</h1>
      <div className="flex mb-4">
        <input
          type="text"
          className="flex-1 p-2 border rounded"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Add a new task..."
        />
        <button
          onClick={addTask}
          className="ml-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Add
        </button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index} className="flex justify-between items-center mb-2">
            <span
              className={`flex-1 ${task.completed ? 'line-through text-gray-500' : ''}`}
              onClick={() => toggleTaskCompletion(index)}
            >
              {task.text}
            </span>
            <button
              onClick={() => deleteTask(index)}
              className="ml-4 p-1 bg-red-500 text-white rounded hover:bg-red-600"
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

Step 3: Integrating the Component into the App

Once the TodoList component is ready, integrate it into the main App.js file. Here’s how:

import './App.css';
import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

Step 4: Testing your work!

By running:

npm start

We can see the basic layout of our Todo List Page like this:

Typing your todos:

Clicking the Add button to add the todos:

Toggle the tasks that have been completed:

Delete the task that you don't want anymore by clicking the Delete button:

Conclusion

Building this Todo List with React and TailwindCSS helped demonstrate the power of combining a component-based library like React with a utility-first CSS framework. React's state management, combined with Tailwind's simple, intuitive styling, allowed us to quickly create a responsive, interactive application.

You can continue enhancing this app by:

Persisting the tasks in localStorage so they’re saved between page refreshes.
Adding due dates or priority levels to tasks.
Expanding the design with more complex styles and animations.

Thanks for reading! I hope this project inspired you to explore more with React and TailwindCSS.

Blog