Building a Counter with React and Tailwind CSS

Hi and Welcome to Mysha's Techno! Today this blog article will demonstrate how to use Tailwind CSS with React to create a basic counter application. You will learn the fundamentals of using Tailwind CSS for styling user interfaces and React for creating them through this project.

Prerequisites

Before we start, make sure you have the following tools installed:

• Node.js and npm (Node Package Manager)
• A code editor (like Visual Studio Code)

Setting Up the Project

1. Create a new React app: Open your terminal and run the following command to create a new React application using Create React App:

   npx create-react-app react-tailwind-counter
   cd react-tailwind-counter

2. Install Tailwind CSS: Inside your project directory, install Tailwind CSS via npm:

   npm install tailwindcss
   

3. Configure Tailwind CSS: Create a tailwind.config.js file:

   npx tailwindcss init
   

   In the tailwind.config.js file, add the paths to all of your template files:

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

4. Add Tailwind to your CSS: Open the src/index.css file and add the following lines:

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

Building the Counter Component

1. Create the Counter Component: In the src directory, create a new file named Counter.js:

   import React, { useState } from 'react';
   
   const Counter = () => {
     const [count, setCount] = useState(0);
   
     return (
       <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
         <div className="text-2xl font-bold mb-4">Counter: {count}</div>
         <div>
           <button
             onClick={() => setCount(count + 1)}
             className="bg-blue-500 text-white px-4 py-2 rounded mr-2"
           >
             Increment
           </button>
           <button
             onClick={() => setCount(count - 1)}
             className="bg-red-500 text-white px-4 py-2 rounded"
           >
             Decrement
           </button>
         </div>
       </div>
     );
   };
   
   export default Counter;
   

2. Use the Counter Component in App.js: Open the src/App.js file and replace its content with the following:

   
   import React from 'react';
   import Counter from './Counter';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <Counter />
       </div>
     );
   }
   
   export default App;
   

Running the Application

Now that everything is set up, you can run your application. In your terminal, execute:

npm start

Your browser should automatically open a new tab with your running React application. You should see a simple counter interface with "Increment" and "Decrement" buttons styled using Tailwind CSS.

Conclusion

Best wishes! You've just used Tailwind CSS and React to create a simple counter application. This project shows how simple it is to start using these tools and create a basic yet useful user interface. You can build on this project from here by including more features like resetting the counter, establishing a maximum or minimum value, or even including more sophisticated state management systems.

Feel free to experiment and explore the capabilities of React and Tailwind CSS further. Happy coding!

---

If you have any questions or run into issues, leave a comment below, and I'll be happy to help!