Я создал проект React + Next.js + NextUI. Подключен Tailwindcss. У меня есть главный app.css файл, где я элементам: html, body, div[data-overlay-container] задал высоту height в 100%. Но, если дочернему элементу задать padding-top: 1000px, то можно увидеть, что body не растягивается на всю высоту, хотя должен был. Для примера я элементу body задал красный фон. В чем может быть проблема ?
page.tsx
export default function Page() {
return (
<div className={"py-[1000px]"}>Dashboard</div>
);
}
app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body,
div[data-overlay-container] {
height: 100%;
min-height: 100%;
}
body {
@apply
bg-[red];
}
layout.tsx
import type {Metadata} from "next";
import {Inter} from "next/font/google";
import {ReactNode} from "react";
import "./app.css";
const inter = Inter({subsets: ["latin"]});
export const metadata: Metadata = {
title: "Crm",
description: "Crm",
};
export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
return (
<html lang="ru">
<body className={inter.className}>
{children}
</body>
</html>
);
}
Средний
Средний
