Estoy usando Next Js y Tailwind CSS para construir una página web simple. El texto principal en la sección principal se corta solo en los navegadores de iPhone, tanto Safari como Chrome. Aquí está mi código:

 <div className="text-white flex flex-col items-center h-screen justify-center md:items-start px-5 md:pl-20 space-y-16 md:space-y-8"> <h1 className="font-semibold text-4xl md:text-6xl"> Software Development with <span className="font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ab-secondary-shade-1 to-ab-tertiary">Web 3.0 Specialisation</span> </h1> </div>

El texto de Especialización se corta como se muestra a continuación. Intenté agregar la etiqueta meta viewport también en _app.js en Next js pero no funcionó.