我有一個彈出窗口，其中的項目出于某種原因是倒置的。我不知道為什么。我正在創建一個使用tailwindcss作為css框架的react-app。 這是我的風格:

.dark {

    @apply w-full h-full fixed top-0 z-10 left-0 flex items-center justify-center;

    background-color: rgba(0,0,0,0.85);

    .content {

      @apply w-[90%] h-fit bg-softBlue rounded-3xl flex;

      .mangaImage {

        @apply m-0 w-[300px] h-[400px]
      }

      .description {

        @apply text-white text-xl max-w-[50%]
      }
    }
  }

這是我的react組件:

const MangaPopUp = ({close , id}) => {
    const {data , loading,error} = useQuery(GET_MANGA_BY_ID , {
        variables: {
            "id": id
        }
    })

    return (
            <div className={styles.dark} onClick={close}>
                <div className={styles.content} onClick={e => {
                    e.stopPropagation()
                }}>
                    {(data && !error) && (
                        <>
                            <LazyImage onLoad={() => {}}
                                           onClick={() => {}} alt={"Обкладинка ман?и"}
                                           imageUrl={MANGA_IMAGE_WAY + data.getManga.image.filename}
                                           className={styles.mangaImage}/>
                            <div className={styles.description}>
                                {data.getManga.description}
                            </div>
                        </>
                    )}
                </div>
            </div>
    );
};

export default MangaPopUp;

這是它看起來的截圖

是的，我可以通過寫justify-end屬性來解決這個問題，但是我想知道為什么孩子們會有這樣的行為。

我發現了錯誤。我不知道這個元素在哪里有方向屬性，所以我把它改成了:

direction: ltr;