我正在用next.js创建一个博客，这个博客使用一个模态来更新或添加新的博客和他们的内容。我在tailwindcss上挣扎。我试图居中模态，但它离开了屏幕。这是我的代码，但它不起作用。

const styles = {
   modal: `flex justify-center place-self-center vertical-align-center`,
    wrapper: `h-full  grid grid-cols-1 gap-4 rounded-xl  bg-gray-50 max-w-sm mx-autoflex flex-col 
    justify-start items-center gap-[1rem] p-[1rem] m-auto font-mediumSerif overflow-scroll`,
    title: `my-[2rem] font-bold text-3xl`,
    smallField: `w-full flex justify-between gap-[1rem]`,
    fieldTitle: `flex-1 text-end`,
    inputContainer: `flex-[5] h-min border-2 border-[#787878]`,
    inputField: `w-full border-0 outline-none bg-transparent`
}

const PostModal = () => {
    return (
            <div className={styles.modal}>
        <div className={styles.wrapper}>
            <div className={styles.title}>Create a New Post</div>
            <div className={styles.smallField}>
            <span className={styles.fieldTitle}>Title</span>
            <span className={styles.inputContainer}>
            <input
            className={styles.inputField}
            type='text'
            />
            </span>       
        </div>
        <div className={styles.smallField}>
            <span className={styles.fieldTitle}>Brief</span>
            <span className={styles.inputContainer}>
            <input
            className={styles.inputField}
            type='text'
            />
            </span>     
        </div>
        <div className={styles.smallField}>
            <span className={styles.fieldTitle}>Banner Image Url</span>
            <span className={styles.inputContainer}>
            <input
            className={styles.inputField}
            type='text'
            />
            </span>       
        </div>
        <div className={styles.smallField}>
            <span className={styles.fieldTitle}>Category</span>
            <span className={styles.inputContainer}>
            <input
            className={styles.inputField}
            type='text'
            />
            </span>     
        </div>  <div className={styles.smallField}>
            <span className={styles.fieldTitle}>Estimated Read Length (in minutes)</span>
            <span className={styles.inputContainer}>
            <input
            className={styles.inputField}
            type='text'
            />
            </span>       
        </div>
        <div className={styles.smallField}>
            <span className={styles.fieldTitle}>Article Text</span>
            <span className={styles.inputContainer}>
            <textarea
            className={styles.inputField}
            type='text'
            rows={12}
            />
            </span>     
        </div>
    </div>
    </div>
   
    )
}
export default PostModal;

我试过调整中心，调整领带，调整伸缩，但都没用，h-screen，调整宽度和高度，但到目前为止都没用。