How to show error message with tailwindcss condtionally?

Question

I am trying to show error message with react-hook-form and tailwind css conditionally.

export const FieldWrapper: FunctionComponent<FieldWrapperProps> = (props: FieldWrapperProps) => {
  const { children, label, errorMessage, className } = props;

  return (
    <div
      className={clsx('mt-6 flex flex-col justify-center tracking-wide align-middle', className)}
    >
      <label htmlFor={label} className="block text-gray-light text-base  font-bold mb-2 peer">
        {label}
      </label>
      {children}
      {errorMessage && <p className="text-sm text-red-500 ">{errorMessage}</p>}
    </div>
  );
};

I am reusing this component, but when there is an error message it pushes down the component itself to show error message and breaks the layout.

How do i make it so, it does not push the component down?

DAbuzied · Accepted Answer · 2022-04-29 21:22:23Z

1

have you tried using justify-start instead of justify-center

answered Apr 29, 2022 at 21:22

DAbuzied

1292 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to show error message with tailwindcss condtionally?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related