cssreactjsnext.jstailwind-cssprism

UTF-8 text pop up out of the parent frame

I'm kind of new to frontend. Recently, I've created blog with template based on Next.js, tailwind, and React.

When I entered UTF-8 text(Korean), the text pop out of the parent frame on mobile.

Can you help me how to fix this issue?

My screen looks like:

enter image description here

My code looks like:

(jsx)

      <div className="mt-6 grid gap-6 md:mt-12 md:grid-cols-[auto_3fr_auto] md:gap-0">
        <div>
          <SocialShare url={pageUrl} className="sticky left-10 top-12 z-10" />
        </div>
        <div className="prose prose-invert mx-auto max-w-prose prose-pre:max-w-[90vw]">
          <ContentRenderer source={content} />
        </div>
      </div>

(css)

@layer base {
  * {
    @apply box-border;
  }
  h1 {
    @apply text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl;
  }
  h2 {
    @apply text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl;
  }
  h3 {
    @apply text-3xl font-bold tracking-tight lg:text-4xl;
  }
  h4 {
    @apply text-2xl font-bold md:text-3xl;
  }
  h5 {
    @apply text-xl font-bold md:text-2xl;
  }
  h6 {
    @apply text-lg font-bold md:text-xl;
  }
  p {
    @apply text-base md:text-lg;
  }
  small,
  small * {
    @apply text-sm font-medium md:text-base;
  }
  :is(h1, h2, h3, h4, h5, h6) {
    & > em {
      @apply text-gradient-500 not-italic;
    }
    & > span {
      color: var(--tw-prose-counters);
    }
  }
}

@layer utilities {
  .text-gradient-500 {
    @apply bg-gradient-to-br from-alpha to-beta bg-clip-text text-transparent;
  }
  .bg-gradient-omega-900 {
    @apply bg-gradient-to-r from-omega-900 to-omega-800;
  }
  .with-back-plate {
    @apply relative mb-2 -translate-x-2 md:mb-2 md:-translate-x-2;
    &::before {
      @apply absolute right-0 bottom-0 h-full w-full translate-y-2 translate-x-2 bg-white md:translate-y-2 md:translate-x-2;
      content: '';
      z-index: -1;
    }
  }
}

Deployed site:

Solution

  • Add overflow-wrap: anywhere; equivalence class/css to p tag should work. enter image description here

    Edited: Seems like Tailwind doesn't have an equivalence for overflow-wrap: anywhere; yet