min-h-screen in Tailwind CSS



min-h-screen in Tailwind CSS means:

min-height: 100vh;

So the element’s minimum height becomes the full height of the browser viewport.

Example:

<div class="min-h-screen bg-gray-100">
  Content
</div>

This makes the <div> at least as tall as the screen.

Common use cases:

  • Full-page layouts

  • Centering content vertically

  • Sticky footer layouts

  • Hero sections

Example with centered content:

<div class="min-h-screen flex items-center justify-center">
  <h1>Hello</h1>
</div>

  • flex enables flexbox

  • items-center centers vertically

  • justify-center centers horizontally

  • min-h-screen gives the container full screen height

Difference from h-screen:

ClassMeaning
h-screenexact height = screen height
min-h-screenminimum height = screen height, can grow taller

So if content becomes larger than the screen:

  • h-screen may overflow

  • min-h-screen expands naturally and is usually safer for pages




https://chatgpt.com/s/t_6a07279539288191a9e55e34de260559

Comments

Post a Comment

Popular posts from this blog

new Promise((resolve) => setTimeout(resolve, ms))

  resolve is the function that tells a JavaScript Promise : “This async task is finished successfully.” In your code: const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); here’s what happens step-by-step: new Promise(...) creates a promise. JavaScript automatically provides a function called resolve . setTimeout(resolve, ms) waits ms milliseconds. After the timer finishes, resolve() is called. Calling resolve() marks the promise as completed. So this: delay(1000) creates a promise that resolves after 1 second. Example: delay(1000).then(() => { console.log("1 second passed"); }); or with async/await : await delay(1000); console.log("done"); You can think of it like this: new Promise((resolve) => { // do async work resolve(); // finish successfully }); resolve is just a parameter name. You could rename it: new Promise((finish) => { setTimeout(finish, ms); }); but resolve is the standard convention. https://...
Read more

Ecommerce with JS

 Not quite. It works for many numbers, but there are some edge cases. Your function: export function round2(value: number | string) { if (typeof value === 'number') { return Math.round((value + Number.EPSILON) * 100) / 100; } else if (typeof value === 'string') { return Math.round((Number(value) + Number.EPSILON) * 100) / 100; } else { throw new Error('Value is not a number or string'); } } What it does well round2(1.234); // 1.23 round2(1.235); // 1.24 round2("12.345"); // 12.35 The Number.EPSILON trick helps with some floating-point issues: Math.round(1.005 * 100) / 100 // 1 round2(1.005) // 1.01 What it doesn't guarantee Invalid strings round2("abc") // NaN No error is thrown because "abc" is still a string. You may want: const num = Number(value); if (Number.isNaN(num)) { throw new Error("Invalid number"); } Very large numbers Floating-point precision limits still apply: round2(12345...
Read more