Create Reusable Button Component with React & Tailwind CSS

In this section we will create reusable button component using react js with tailwind css 3. First you need to install setup react with tailwind css. you can react below article.

Install & Setup Vite + React + Typescript + Tailwind CSS 3

How to install Tailwind CSS in React

First you need to create Button.jsx component.

Components/Button.jsx

import React from 'react';

export default function Button({
  type = 'submit',
  className = '',
  processing,
  children,
}) {
  return (
    <button
      type={type}
      className={
        `inline-flex items-center px-4 py-2 bg-gray-900 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest active:bg-gray-900 transition ease-in-out duration-150 ${
          processing && 'opacity-25'
        } ` + className
      }
      disabled={processing}
    >
      {children}
    </button>
  );
}

Now you can import Button Component and use anywhere.

App.jsx

import Button from './Components/Button';

function App() {
  return (
    <div className="flex items-center justify-center h-screen">
      <div className="flex gap-x-4">
        <Button>Button</Button>
        <Button className="bg-red-600">Button</Button>
        <Button className="bg-green-600">Button</Button>
        <Button className="bg-purple-600">Button</Button>
        <Button className="bg-cyan-600">Button</Button>
      </div>
    </div>
  );
}

export default App;

Reusable Button Component with React & Tailwind CSS

Now, run the server

npm start
npm run dev 

Read Also

React Tailwind CSS Accordion (FAQ) Example

React Tailwind CSS Tabs Examples

How to use Tailwind CSS 3 with Headless UI In React

Toggle Switch in React JS with Tailwind CSS Example

Create Reusable Button Component with React & Tailwind CSS

React Tailwind CSS Search Bar Example

React Tailwind CSS Sidebar Example

React JS Login Form with Tailwind CSS Example

React Responsive Navbar Menu With Tailwind CSS Example

How to install Tailwind CSS in React

React Tailwind CSS Dialog (Modal) Example

React Tailwind Registration Form Example

React Tailwind CSS Table Example

React Tailwind CSS Responsive Gallery Example