Cleaned + added a few comments

src/components/Button.tsx

@@ -62,11 +62,7 @@ export const Button: React.FC<Props> = (props) => {
   if (linkProps.href) {
     const { href, ...rest } = linkProps;
     return (
-      <Link
-        href={href}
-        {...rest}
-        className={cx(button(variant), className, "bg-red-500")}
-      >
+      <Link href={href} {...rest} className={cx(button(variant), className)}>
         {buttonContent}
       </Link>
     );

tailwind.config.cjs

@@ -104,6 +104,8 @@ module.exports = {
         blur: "0 0 5px #303030",
       },
       keyframes: {
+        // === Radix UI =======================================================
+        // DropdownMenu
         slideDownAndFade: {
           from: { opacity: 0, transform: "translateY(-2px)" },
           to: { opacity: 1, transform: "translateY(0)" },
@@ -120,8 +122,19 @@ module.exports = {
           from: { opacity: 0, transform: "translateX(2px)" },
           to: { opacity: 1, transform: "translateX(0)" },
         },
+        // Dialog
+        overlayShow: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        contentShow: {
+          from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },
+          to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
+        },
       },
       animation: {
+        // === Radix UI =======================================================
+        // DropdownMenu
         slideDownAndFade:
           "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
         slideLeftAndFade:
@@ -129,6 +142,9 @@ module.exports = {
         slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
         slideRightAndFade:
           "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        // Dialog
+        overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentShow: "contentShow 300ms cubic-bezier(0.16, 1, 0.3, 1)",
       },
     },
   },