React + Tailwind CSS でコンポーネントを作ってみた

はじめに

React+Tailwindで再利用性の高い？コンポーネントに作ってみましたと...
今回はボタンを例に作って見ました
※tailwind CSSのインストールとかは省きます（verは3.1.8使用）

コンポーネント

使用するうえで必要な機能を乗せると以下のような感じになりました。

Button.tsx

type BtnProps = {
  block?: boolean;
  children: React.ReactNode;
  className?: string;
  color?: "blue" | "green" | "red" | "yellow" | "indigo" | "dark";
  disabled?: boolean;
  rounded?: boolean;
  size?: "sm" | "md" | "lg";
  submit?: boolean;
  onClick?: (event: any) => void;
};

const style = {
  rounded: `rounded-full`, //角を丸くする
  block: `flex justify-center w-full`,//最大幅まで伸ばす
  default: `text-white focus:outline-none font-medium`,
  sizes: {  //サイズ
    sm: "text-sm",
    md: "",
    lg: "text-lg",
  },
  colors: {　//色
    blue: `bg-blue-600 focus:ring-2 focus:ring-offset-2 hover:bg-blue-700 focus:ring-blue-500`,
    green: `bg-green-600 focus:ring-2 focus:ring-offset-2 hover:bg-green-700 focus:ring-green-500`,
    red: `bg-red-600 focus:ring-2 focus:ring-offset-2 hover:bg-red-700 focus:ring-red-500`,
    dark: `bg-black focus:ring-2 focus:ring-offset-2 hover:bg-black-600 focus:ring-gray-500`,
    yellow: `bg-yellow-500 focus:ring-2 focus:ring-offset-2 hover:bg-yellow-600 focus:ring-yellow-500 `,
    indigo: `bg-indigo-600 focus:ring-2 focus:ring-offset-2 hover:bg-indigo-700 focus:ring-indigo-600`,
  },
};

const Button = (
  (
    {
      block = false,
      children,
      className,
      color,
      disabled = false,
      rounded,
      size = "md",
      submit,
      onClick,
    }: BtnProps
  ) => (
    <button
      type={submit ? "submit" : "button"}
      disabled={disabled}
      onClick={onClick}
      className={`${className} ${block ? style.block : ""}
               ${color ? style.colors[color] : style.colors.dark}
               ${style.default} ${rounded ? style.rounded : "rounded"}
               ${style.sizes[size]} `}
    >
      {children}
    </button>
  )
);

export default Button;

使い方

使うときはこんな感じ

<Button
  onClick={() => console.log("OK")}
  color="blue"
  size="md"
>
  button
</Button>

一応classNameで自由にcssを当てれるようにしているのでいろいろなことできると思います。

例えば影を追加する場合
className="shadow-lg shadow-blue-500/50"を追加すると...影ができます。