Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make it easier to work with Tailwind

See original GitHub issue

I’m trying to customize my toasts with Tailwind, but I’m currently struggling with the default styles. I’m trying to override the styles with Tailwind but I can’t remove the default classes:

export const Toast: React.FunctionComponent<ToastProps> = ({
  position = 'bottom-center',
  toastOptions = {
    className: 'text-xs font-semibold rounded-lg p-2',
    success: {
      icon: null,
      className: 'text-xs font-semibold rounded-lg p-2 bg-green-300 text-green-900',
    },
    error: {
      icon: null,
      className: 'text-xs font-semibold rounded-lg p-2 bg-red-300 text-red-900',
    },
  },
  ...props
}: ToastProps) => {
  return (
    <Toaster position={position} toastOptions={toastOptions} {...props}>
      {(t) => (
        <ToastBar toast={t} position={position}>
          {({ message }) => (
            <>
              {message}
             
            </>
          )}
        </ToastBar>
      )}
    </Toaster>
  );
};

But they are overrided with those styles https://github.com/timolins/react-hot-toast/blob/d1456c4e4fdc8210f24b08334a2a464efa815eb0/src/components/toast-bar.tsx#L21-L33 and I can’t even override those ones (remove margin) https://github.com/timolins/react-hot-toast/blob/d1456c4e4fdc8210f24b08334a2a464efa815eb0/src/components/toast-bar.tsx#L35-L41 Please think about removing those default styles so we can easily theme them by adding classes and styles or by adding an extra div.