Rückenwindhöhe vom Array funktioniert in Next.js nicht ⇐ JavaScript

[Anonymous]

Ich verwende Next.js mit Tailwind CSS. Ich habe ein Array von Objekten und ordne es zu, um Abschnitte zu rendern. Jedes Element hat einen Höhenwert, der die Tailwind-Höhenklasse steuern soll.

Code: Select all

const segments = [
{
height: "screen",
},
{
height: "[200vh]",
},
];

Und ich mache:

Code: Select all

...

Dies funktioniert nur, wenn die Höhe „screen“ ist (h-screen funktioniert), aber Werte wie „[100vh]“ (h-[100vh]) funktionieren nicht.
Ich habe erwartet, dass h-[100vh] korrekt generiert wird, aber Tailwind wendet den Stil nicht an.
aber wenn ich die Höhe nicht dynamisch lade (

Code: Select all

classname="h-[100vh]"

), es funktioniert
Ich weiß nicht, was das verursacht. Hier ist die Codesandbox: https://codesandbox.io/p/devbox/6lxqmq