a brown button with a green 2pd border and a padding of 8pm written in react and tailwind in typescript

Here's an example code to style a brown button with a green 2px border and 8px padding using Tailwind CSS in a React component written in TypeScript:

index.ts
import React from 'react';

interface ButtonProps {
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return (
    <button
      className="bg-brown-500 border-green-500 border-2px py-8px px-12px rounded-md"
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;
346 chars
19 lines

In the code above, we define a Button component that takes an onClick function as a prop and renders a button element with the specified styles. We use Tailwind CSS classes like bg-brown-500, border-green-500, border-2px, py-8px, px-12px, and rounded-md to apply the desired styling.

Make sure to import Tailwind CSS in your project and configure it properly for it to work. Also, adjust the class names to match your project's Tailwind CSS configuration if necessary.