Tailwind Installation

npm install -D tailwindcss
npx tailwindcss init

Tailwind config

\*\* @type {import('tailwindcss').Config} \*/
module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

global.css

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

Install Tailwind Combo

$ npm install --save clsx
$ npm i tailwind-merge
$ npm i class-variance-authority

Create Cn Function

import { clsx, ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Create Reusable Button

import { VariantProps, cva } from 'class-variance-authority';
import React, { ButtonHTMLAttributes, FC, forwardRef } from 'react';
import { cn } from '../lib/util';

// Customized navigation variations
const buttonVariants = cva(
  `px-3 py-2 rounded-xl transition-all hove:ring-2 ring-indigo-300 hover:text-white`,
  {
    variants: {
      variant: {
        primary: 'bg-blue-400',
        danger: 'bg-red-500',
        alert: 'bg-yellow-500',
      },
      size: {
        small: 'py-2 px-4',
        large: 'text-xl py-3 px-6',
      },
    },
    defaultVariants: {
      size: 'small',
      variant: 'primary',
    },
  }
);

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  ref?: React.Ref<HTMLButtonElement>;
}

const Button: FC<ButtonProps> = forwardRef(
  ({ size, variant, className, children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        type='button'
        className={cn(buttonVariants({ className, variant, size }))}
        {...props}
      >
        {children}
      </button>
    );
  }
);

export default Button;