Create Buttons UI using React and Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows developers to quickly build responsive and reusable components. We'll explore how to create buttons with different styles such as primary, secondary, and disabled states, and buttons of various sizes.

Prerequisites

• React
• JavaScript
• NodeJS
• Tailwind CSS

Approach For Creating Buttons UI

• Create a new React project using "npx create-react-app" command.
• Inside the src folder create a components to keep a file called Button.js.
• Write the Button component code that leverages Tailwind CSS utility classes. The component takes props like type, size, and disabled for flexibility.
• The component uses Tailwind utility classes like rounded, text-white, bg-blue-500, and hover bg-blue-600 to create different styles for the button.

Steps to create Buttons UI

Step 1: Set up the project using the command.

npx create-react-app buttons-ui-tailwind
cd buttons-ui-tailwind

Step 2: Install Tailwind CSS using the command.

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

Step 3: Configure the tailwind paths in your tailwind.config.js file.

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

Step 4: Add tailwind directives to your index.css file.

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

Project Structure:

Updated Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

Example: In this example, we will write the following code in different files(The files' names are mentioned in the first line of each code block).

// src/App.js

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

function App() {
    return (
        <div className="flex flex-col items-center justify-center h-screen 
        bg-gray-100 space-y-4">
            <h1 className="text-2xl font-bold">Button UI using React and 
            Tailwind CSS</h1>

            <Button type="primary" size="small">Primary Small</Button>
            <Button type="primary" size="medium">Primary Medium</Button>
            <Button type="primary" size="large">Primary Large</Button>

            <Button type="secondary" size="medium">Secondary Button</Button>

            <Button type="primary" size="medium" disabled={true}>Disabled Button</Button>
        </div>
    );
}

export default App;

// src/components/Button.js

import React from 'react';

const Button = ({ type = 'primary', size = 'medium', disabled = false,
children }) => {
    const baseClasses = `rounded px-4 py-2 font-semibold 
    focus:outline-none transition`;
    const typeClasses = {
        primary: `bg-blue-500 text-white hover:bg-blue-600`,
        secondary: `bg-gray-500 text-white hover:bg-gray-600`,
        disabled: `bg-gray-300 text-gray-700 cursor-not-allowed`,
    };
    const sizeClasses = {
        small: `text-xs py-1 px-2`,
        medium: `text-base py-2 px-4`,
        large: `text-lg py-3 px-6`,
    };

    const buttonClasses = `${baseClasses} ${sizeClasses[size]}
    ${disabled ? typeClasses.disabled : typeClasses[type]
        }`;

    return (
        <button className={buttonClasses} disabled={disabled}>
            {children}
        </button>
    );
};

export default Button;

To start the Application run the following command.

npm start

Output:

yuvrajghule281

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Tailwind CSS