React Js & Tailwind CSS Projects To Do List App

In this tutorial, we will be building a To-Do List app using React Js and Tailwind CSS. This project will help you understand how to create a simple CRUD (Create, Read, Update, Delete) application in React and style it using Tailwind CSS.

Prerequisites:
Before starting this tutorial, you should have a basic understanding of React Js, JavaScript, and HTML. You should also have Node.js and npm installed on your system.

Step 1: Setting up the project
To start, create a new React project using create-react-app. Open your terminal and run the following command:

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

After creating the project, install Tailwind CSS by running the following command:

npm install tailwindcss

Next, we need to configure Tailwind CSS in our project. Create a tailwind.config.js file in the root of your project and add the following code:

module.exports = {
  purge: [],
  darkMode: false, // or 'emerge' or 'class',
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Then, create a styles.css file in the src directory and include the following:

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

Lastly, import the styles.css file in the index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Step 2: Creating components
Now, let’s create the components for our To-Do List app. Create a src/components directory and add the following files:

1. TodoList.js
2. TodoItem.js

In the TodoList.js file, add the following code:

import React, { useState } from 'react';
import TodoItem from './TodoItem';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (!inputValue) {
      return;
    }

    const newTodo = {
      id: Math.random(),
      text: inputValue,
      completed: false,
    };

    setTodos([...todos, newTodo]);
    setInputValue('');
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter task"
      />
      <button onClick={addTodo}>Add Task</button>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} deleteTodo={deleteTodo} />
      ))}
    </div>
  );
};

export default TodoList;

In the TodoItem.js file, add the following code:

import React from 'react';

const TodoItem = ({ todo, deleteTodo }) => {
  return (
    <div>
      <input type="checkbox" checked={todo.completed} />
      <span>{todo.text}</span>
      <button onClick={() => deleteTodo(todo.id)}>Delete</button>
    </div>
  );
};

export default TodoItem;

Step 3: Importing components in App.js
Now, import the TodoList component in the App.js file and render it:

import React from 'react';
import TodoList from './components/TodoList';

function App() {
  return (
    <div>
      <h1>My To-Do List</h1>
      <TodoList />
    </div>
  );
}

export default App;

Step 4: Styling the app with Tailwind CSS
Now, let’s add some styling to our app using Tailwind CSS classes. Update the TodoList.js and TodoItem.js files to include Tailwind CSS classes:

In TodoList.js:

<div className="w-full max-w-xs mx-auto mt-4">
  <input
    className="w-full p-2 border border-gray-300"
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    placeholder="Enter task"
  />
  <button
    className="w-full mt-2 p-2 bg-blue-500 text-white rounded"
    onClick={addTodo}
  >
    Add Task
  </button>
</div>

In TodoItem.js:

<div className="flex items-center justify-between p-2 border-b border-gray-300">
  <input
    type="checkbox"
    checked={todo.completed}
    className="mr-2"
  />
  <span className={todo.completed ? 'line-through' : ''}>{todo.text}</span>
  <button
    className="p-2 bg-red-500 text-white rounded"
    onClick={() => deleteTodo(todo.id)}
  >
    Delete
  </button>
</div>

Step 5: Testing the app
Open your terminal and run the following command to start your React app:

npm start

Once the app is running, you should see a simple To-Do List app with the ability to add tasks, mark tasks as completed, and delete tasks. You can also style the app further using Tailwind CSS utilities.

Congratulations! You have successfully built a To-Do List app using React Js and Tailwind CSS. You can now expand the functionality of the app by adding features such as editing tasks, filtering tasks, and saving tasks to a database. Have fun coding!