Как с помощью Tailwind CSS сделать так, чтобы ширина и высота страницы всегда соответствовали экрану? ⇐ CSS

[Anonymous]

Я использую Tailwind CSS для разработки своего веб-сайта, и при создании макета я постоянно сталкиваюсь с проблемой: страница всегда шире и выше размера экрана. Если с вами когда-либо такое случалось, вы знаете, как это раздражает.
Я думаю, это потому, что я добавил панель навигации с фиксированным позиционированием и h-контентом. В любом случае моя основная оболочка div должна охватывать всю страницу, соответствовать экрану без создания каких-либо полос прокрутки и иметь поля m-8 со всех сторон, при этом по-прежнему помещаясь на экран.
Я обнаружил, что свойства высоты (

Код: Выделить всё

h-full

, h-content, h-screen) и свойства ширины (

Код: Выделить всё

w-full

, w-content, w-screen) иногда может сбивать с толку. Особенно, когда я начинаю добавлять на страницу другие элементы div для создания «разделов» с заданной высотой и шириной.
Есть ли у кого-нибудь хорошее руководство или статья о том, как работают эти свойства? Должно быть, я их неправильно понимаю.
Я использую React и Next.js. На главной странице я возвращаю что-то вроде этого:

Код: Выделить всё

{/* This nav is applied to all pages through the pages/.app */}

Любые ресурсы, которые помогут мне понять, как создавать макеты с помощью Tailwind, будут мне очень полезны.

Подробнее здесь: https://stackoverflow.com/questions/754 ... ys-fit-the