如何有条件地使用 tailwind css 显示错误消息？

Question

我正在尝试有条件地使用 react-hook-form 和 tailwind css 显示错误消息。

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>
  );
};

我正在重用此组件，但当出现错误消息时，它会下推组件本身以显示错误消息并破坏布局。

我该怎么做，它不会将组件向下推？

Answer 1

您是否尝试过使用 justify-start 而不是 justify-center

如何有条件地使用 tailwind css 显示错误消息？

How to show error message with tailwindcss condtionally?

reactjs

tailwind-css