Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.
Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.
Mit reinem CSS wäre das einfach so lösbar:
CSS
.grid {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 5rem 1fr 7rem;
}
HTML
<div class="grid">
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</div>
Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.
Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?