TailwindCSS Styled Alert

[DanielBailey-web]

Modified radix-ui website example using tailwind css and typescript.

There wasn't much information on the case of not using stitches, so here is an example for anyone coming from tailwindcss.

import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import type { FC } from "react";

interface Props {
  disabled: boolean;
}

export const InviteUserConfirmation = ({ disabled }: Props) => (
  <AlertDialogPrimitive.Root>
    <AlertDialogPrimitive.Trigger asChild>
      <button
        disabled={disabled}
        className="ml-auto flex py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:cursor-not-allowed"
      >
        Invite Users
      </button>
    </AlertDialogPrimitive.Trigger>
    <Content>
      <AlertDialogPrimitive.Title className="text-lg font-medium">
        Are you sure you want to invite this user?
      </AlertDialogPrimitive.Title>
      <AlertDialogPrimitive.Description className="text-md text-gray-700">
        When this user signs up, they will have full access to your business;
        This includes the ability to schedule services, such as deliveries and
        pickups. As well as see your company information including unit
        addresses.
      </AlertDialogPrimitive.Description>
      <div className="flex justify-end mt-2">
        <AlertDialogPrimitive.Cancel asChild>
          <button className="mr-6 flex py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            Cancel
          </button>
        </AlertDialogPrimitive.Cancel>
        <AlertDialogPrimitive.Action asChild>
          <button
            className="flex py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
            onClick={()=>{console.log("submitting");}}
          >
            Yes, invite user
          </button>
        </AlertDialogPrimitive.Action>
      </div>
    </Content>
  </AlertDialogPrimitive.Root>
);

const Content: FC = ({ children, ...props }) => {
  return (
    <AlertDialogPrimitive.Portal>
      <AlertDialogPrimitive.Overlay className="fixed bg-black bg-opacity-30 inset-0 z-40" />
      <AlertDialogPrimitive.Content
        className="animate-fade-in-out shadow-lg z-50 bg-white w-[90vw] rounded-md fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-lg max-h-[85vh] p-6"
        {...props}
      >
        {children}
      </AlertDialogPrimitive.Content>
    </AlertDialogPrimitive.Portal>
  );
};

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      keyframes: {
        fade: {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 },
        },
      },
      animation: {
        "fade-in-out": "fade 350ms cubic-bezier(0.16, 1, 0.3, 1)",
      },
    }
  }
}