Tailwind Merge

GitHun

YouTube

Установка

yarn add tailwind-merge

Package.json

./components/_ui/Button.tsx

import React from "react";
import { twMerge } from "tailwind-merge";

type ButtonProps = {
  as?: any;
  className?: string;
  href?: string;
  children: React.ReactNode;
} & React.ComponentProps<"button">;

export default function Button({
  className,
  children,
  ...restProps
}: ButtonProps) {
  const { as } = restProps;
  const Component = as || "button";
  return (
    <Component
      className={twMerge(
        "inline-block rounded-lg bg-gray-500 p-4 text-white",
        className,
      )}
      {...restProps}
    >
      {children}
    </Component>
  );
}

./app/page.tsx

import { Button } from "@/components/_ui/Button";

export default function Home() {
  return (
    <Button as="a" className="rounded-full bg-blue-500" href="#">Привет мир</Button>
  );
}