Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Min-Height

Min-height ensures an element is constrained to a specific minimum vertical space. It defines the smallest height an element can occupy, even if its content is smaller or absent. This is particularly useful when you want to maintain consistent layouts or preserve space for dynamic content.

In Tailwind CSS, the min-height utility classes allow you to set minimum height constraints with ease. These utilities simplify applying responsive and conditional styling, ensuring consistent design across various screen sizes and states.

ClassPropertiesExample
min-h-0min-height: 0px;<div className="min-h-0"></div>
min-h-1min-height: 0.25rem; <div className="min-h-1"></div>
min-h-2min-height: 0.5rem; <div className="min-h-2"></div>
min-h-3min-height: 0.75rem; <div className="min-h-3"></div>
min-h-4min-height: 1rem; <div className="min-h-4"></div>
min-h-5min-height: 1.25rem; <div className="min-h-5"></div>
min-h-6min-height: 1.5rem; <div className="min-h-6"></div>
min-h-7min-height: 1.75rem; <div className="min-h-7"></div>
min-h-8min-height: 2rem; <div className="min-h-8"></div>
min-h-9min-height: 2.25rem; <div className="min-h-9"></div>
min-h-10min-height: 2.5rem; <div className="min-h-10"></div>
min-h-11min-height: 2.75rem; <div className="min-h-11"></div>
min-h-12min-height: 3rem; <div className="min-h-12"></div>
min-h-14min-height: 3.5rem; <div className="min-h-14"></div>
min-h-16min-height: 4rem; <div className="min-h-16"></div>
min-h-20min-height: 5rem; <div className="min-h-20"></div>
min-h-24min-height: 6rem; <div className="min-h-24"></div>
min-h-28min-height: 7rem; <div className="min-h-28"></div>
min-h-32min-height: 8rem; <div className="min-h-32"></div>
min-h-36min-height: 9rem; <div className="min-h-36"></div>
min-h-40min-height: 10rem; <div className="min-h-40"></div>
min-h-44min-height: 11rem; <div className="min-h-44"></div>
min-h-48min-height: 12rem; <div className="min-h-48"></div>
min-h-52min-height: 13rem; <div className="min-h-52"></div>
min-h-56min-height: 14rem; <div className="min-h-56"></div>
min-h-60min-height: 15rem; <div className="min-h-60"></div>
min-h-64min-height: 16rem; <div className="min-h-64"></div>
min-h-72min-height: 18rem; <div className="min-h-72"></div>
min-h-80min-height: 20rem; <div className="min-h-80"></div>
min-h-96min-height: 24rem; <div className="min-h-96"></div>
min-h-pxmin-height: 1px;<div className="min-h-px"></div>
min-h-0.5min-height: 0.125rem; <div className="min-h-0.5"></div>
min-h-1.5min-height: 0.375rem; <div className="min-h-1.5"></div>
min-h-2.5min-height: 0.625rem; <div className="min-h-2.5"></div>
min-h-3.5min-height: 0.875rem; <div className="min-h-3.5"></div>
min-h-fullmin-height: 100%;<div className="min-h-full"></div>
min-h-screenmin-height: 100vh;<div className="min-h-screen"></div>
min-h-svhmin-height: 100svh;<div className="min-h-svh"></div>
min-h-lvhmin-height: 100lvh;<div className="min-h-lvh"></div>
min-h-dvhmin-height: 100dvh;<div className="min-h-dvh"></div>
min-h-minmin-height: min-content;<div className="min-h-min"></div>
min-h-maxmin-height: max-content;<div className="min-h-max"></div>
min-h-fitmin-height: fit-content;<div className="min-h-fit"></div>

Overview of Min-Height

Adding the Minimum Height

To define the minimum height of an element, Tailwind provides predefined utilities such as min-h-screen for setting the height to the viewport size or min-h-0 to reset it to zero. You can leverage these utilities to quickly establish constraints for various design requirements.

Here’s an example of how you can define a full-screen container with a minimum height matching the viewport:

This is a live editor. Play around with it!
export default function FullScreenContainer() {
  return (
    <div className="min-h-screen w-screen bg-blue-200 flex items-center justify-center">
      {/* min-height: 100vh; */}
      <p className="text-lg text-center px-10">This container has a minimum height equal to the screen size!</p>
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind utilities allow you to dynamically adjust the min-height property based on states such as hover or focus. This means you can create interactive components where height expands or resets depending on user interaction.

For instance, let’s build a card that increases its minimum height when hovered over:

This is a live editor. Play around with it!
export default function InteractiveCard() {
  return (
    <div className="min-h-40 mt-8 ml-5 w-80 bg-gray-100 hover:min-h-80 transition-all duration-300 overflow-hidden shadow-lg rounded-lg">
      {/* Default min-height: 10rem (40), Hovered min-height: 20rem (80) */}
      <img
        className="w-full h-40 object-cover"
        src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
        alt="Placeholder"
      />
      <div className="p-4">
        <h3 className="text-lg font-semibold">Interactive Card</h3>
        <p className="text-gray-700">Hover to see it expand.</p>
      </div>
    </div>
  );
}

Breakpoint Modifiers

Conditional design becomes even more powerful with Tailwind's breakpoint modifiers, which allow you to set min-height values based on different screen sizes. For instance, elements can have a higher minimum height on large screens compared to small screens.

Here’s how you can use responsive utilities to define flexible layouts:

This is a live editor. Play around with it!
export default function ResponsiveBlock() {
  return (
    <div className="min-h-48 md:min-h-72 lg:min-h-96 w-screen bg-green-100 flex items-center justify-center">
      {/* min-height: 12rem (md: 18rem, lg: 24rem) */}
      <p className="text-lg text-center px-12 text-gray-900">The height of this container will change according to the screen.</p>
    </div>
  );
}

Custom Min-Height

Extending the Theme

Tailwind’s configuration file provides exceptional flexibility to define custom min-height values specific to your project. If the default utilities don't cover your needs, you can extend the theme as follows:

In your tailwind.config.js, add the following customizations:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomMinHeight() {
  return (
    <div className="min-h-128 w-screen bg-red-100 flex items-center justify-center">
      {/* min-height: 32rem */}
      <p className="text-lg text-gray-800 text-center px-10">This container has a custom min-height of 32rem!</p>
    </div>
  );
}

Using Arbitrary Values

While you can define utilities in Tailwind config file, there are scenarios where you might prefer more one-off values. For such cases, Tailwind allows you to specify arbitrary values for min-height using square brackets.

Here’s an example:

This is a live editor. Play around with it!
export default function ArbitraryMinHeight() {
  return (
    <div className="min-h-[500px] w-screen bg-yellow-100 flex items-center justify-center">
      {/* min-height: 500px */}
      <p className="text-lg text-center px-10 text-gray-900">This block uses an arbitrary value for the min-height.</p>
    </div>
  );
}

Real World Examples

Product Gallery with Fixed Height Cards

This example shows a responsive product gallery where each card maintains a minimum height, ensuring consistent layout regardless of content length.

This is a live editor. Play around with it!
export default function ProductGallery() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Wallet",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1627123424574-724758594e93",
      alt: "Brown leather wallet",
      description: "Handcrafted genuine leather wallet with multiple card slots"
    },
    {
      id: 2,
      name: "Minimalist Watch",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1524805444758-089113d48a6d",
      alt: "Sleek black watch",
      description: "Swiss movement with sapphire crystal glass"
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
      {products.map((product) => (
        <div 
          key={product.id} 
          className="bg-white rounded-lg shadow-lg min-h-[200px] flex flex-col"
        >
          <img 
            src={product.src} 
            alt={product.alt}
            className="w-full h-48 object-cover rounded-t-lg"
          />
          <div className="p-4 flex-grow">
            <h3 className="text-xl font-bold">{product.name}</h3>
            <p className="text-gray-600">{product.description}</p>
            <p className="text-lg font-semibold mt-4">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Vertical Timeline with Fixed Height Sections

A timeline component that uses min-height to ensure consistent spacing between events.

This is a live editor. Play around with it!
export default function Timeline() {
  const events = [
    {
      id: 1,
      date: "2023",
      title: "Company Foundation",
      description: "Established our startup with seed funding",
      icon: "https://images.unsplash.com/photo-1589386417686-0d34b5903d23",
    },
    {
      id: 2,
      title: "First Major Client",
      date: "2024",
      description: "Secured partnership with Fortune 500 company",
      icon: "https://images.unsplash.com/photo-1589386417686-0d34b5903d23",
    },
  ];

  return (
    <div className="max-w-3xl mx-auto p-8">
      {events.map((event) => (
        <div 
          key={event.id}
          className="relative min-h-[160px] pl-8 border-l-2 border-blue-500 mb-8"
        >
          <div className="absolute -left-3 top-0">
            <div className="bg-blue-500 rounded-full w-6 h-6"></div>
          </div>
          <div className="pt-2">
            <span className="text-sm text-gray-500">{event.date}</span>
            <h3 className="text-xl font-bold mt-1">{event.title}</h3>
            <p className="text-gray-600 mt-2">{event.description}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Dashboard Stats Cards with Minimum Height

A dashboard component featuring statistics cards with consistent minimum heights.

This is a live editor. Play around with it!
export default function DashboardStats() {
  const stats = [
    {
      id: 1,
      title: "Total Revenue",
      value: "$124,567",
      change: "+12.5%",
      icon: "https://images.unsplash.com/photo-1589386417686-0d34b5903d23",
    },
    {
      id: 2,
      title: "Active Users",
      value: "45,789",
      change: "+8.2%",
      icon: "https://images.unsplash.com/photo-1589386417686-0d34b5903d23",
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
      {stats.map((stat) => (
        <div 
          key={stat.id}
          className="bg-white rounded-xl shadow-md min-h-[140px] p-6 relative overflow-hidden"
        >
          <div className="flex justify-between items-start">
            <div>
              <h3 className="text-gray-500 text-sm">{stat.title}</h3>
              <p className="text-3xl font-bold mt-2">{stat.value}</p>
              <span className="text-green-500 text-sm mt-2 inline-block">
                {stat.change}
              </span>
            </div>
            <div className="bg-blue-100 p-3 rounded-lg">
              <img 
                src={stat.icon} 
                alt=""
                className="w-6 h-6"
              />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Team Member Cards with Uniform Height

A grid of team member cards maintaining consistent heights across different content lengths.

This is a live editor. Play around with it!
export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO & Founder",
      bio: "10+ years experience in tech leadership",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Sarah Johnson headshot",
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      bio: "Former Google engineer with ML expertise",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen headshot",
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 p-8">
      {team.map((member) => (
        <div 
          key={member.id}
          className="bg-gray-50 rounded-xl min-h-[320px] overflow-hidden"
        >
          <div className="aspect-w-1 aspect-h-1">
            <img 
              src={member.src}
              alt={member.alt}
              className="w-full h-48 object-cover"
            />
          </div>
          <div className="p-6">
            <h3 className="text-xl font-bold">{member.name}</h3>
            <p className="text-blue-600 font-medium">{member.role}</p>
            <p className="text-gray-600 mt-3">{member.bio}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Feature Comparison Cards with Equal Heights

A feature comparison component where cards maintain equal heights regardless of content.

This is a live editor. Play around with it!
export default function FeatureComparison() {
  const features = [
    {
      id: 1,
      tier: "Basic",
      price: "$29/mo",
      features: [
        "10 Users",
        "10GB Storage",
        "Email Support",
        "Basic Analytics",
        "API Access",
        "Community Forum"
      ],
      recommended: false,
    },
    {
      id: 2,
      tier: "Pro",
      price: "$79/mo",
      features: [
        "Unlimited Users",
        "100GB Storage",
        "24/7 Support",
        "Advanced Analytics",
        "Premium API Access",
        "Training Sessions"
      ],
      recommended: true,
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
      {features.map((tier) => (
        <div 
          key={tier.id}
          className={`
            min-h-[480px] rounded-2xl p-6 flex flex-col
            ${tier.recommended ? 'bg-blue-50 border-2 border-blue-500' : 'bg-white border border-gray-200'}
          `}
        >
          <div className="mb-6">
            <h3 className="text-2xl font-bold">{tier.tier}</h3>
            <p className="text-3xl font-bold mt-2">{tier.price}</p>
          </div>
          <ul className="space-y-4 flex-grow">
            {tier.features.map((feature, index) => (
              <li key={index} className="flex items-center">
                <svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                </svg>
                {feature}
              </li>
            ))}
          </ul>
          <button
            className={`
              mt-6 w-full py-3 rounded-lg font-semibold
              ${tier.recommended ? 'bg-blue-600 text-white' : 'bg-gray-800 text-white'}
            `}
          >
            Choose Plan
          </button>
        </div>
      ))}
    </div>
  );
}

Customization Examples

Dynamic Content Card with Custom Min-Height

This example demonstrates a content card that maintains a minimum height for consistent layout across different content lengths.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function DynamicContentCard() {
  return (
    <div className="max-w-xl mx-auto p-6">
      <div className="bg-white rounded-xl shadow-lg min-h-card">
        <div className="min-h-header bg-gradient-to-r from-blue-500 to-purple-600 rounded-t-xl p-4">
          <h2 className="text-white text-2xl font-bold">Featured Article</h2>
        </div>
        <div className="p-6 min-h-content">
          <p className="text-gray-700 leading-relaxed">
            Your dynamic content goes here. The card will maintain its minimum
            height regardless of content length, ensuring consistent layout across
            your application.
          </p>
        </div>
      </div>
    </div>
  );
}

Fullscreen Hero Section with Custom Min-Height

This example shows how to create a responsive hero section that maintains minimum height across different screen sizes.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function HeroSection() {
  return (
    <div className="relative min-h-hero bg-gray-900">
      <img
        src="https://images.unsplash.com/photo-1519681393784-d120267933ba"
        className="absolute inset-0 w-full h-full object-cover opacity-50"
        alt="Hero background"
      />
      <div className="relative z-10 flex items-center justify-center min-h-hero-content px-4">
        <div className="text-center">
          <h1 className="text-5xl md:text-7xl font-bold text-white mb-8">
            Welcome to the Future
          </h1>
          <p className="text-xl text-gray-200 mb-12 max-w-2xl mx-auto">
            Discover the next generation of web development with our cutting-edge
            solutions and innovative approaches.
          </p>
          <button className="min-h-cta px-8 bg-white text-gray-900 rounded-full 
            font-bold text-lg hover:bg-gray-100 transition-colors">
            Get Started
          </button>
        </div>
      </div>
    </div>
  );
}

Sidebar Navigation with Custom Min-Height

This example creates a responsive sidebar with custom minimum height requirements for different sections.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function SidebarNavigation() {
  return (
    <div className="flex">
      <aside className="w-64 bg-gray-800 min-h-sidebar">
        <div className="min-h-profile p-4 border-b border-gray-700">
          <div className="flex items-center space-x-3">
            <img
              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
              alt="Profile"
              className="w-10 h-10 rounded-full"
            />
            <div>
              <h3 className="text-white font-medium">John Doe</h3>
              <p className="text-gray-400 text-sm">Admin</p>
            </div>
          </div>
        </div>
        
        <nav className="p-4 min-h-nav-section">
          <ul className="space-y-2">
            {['Dashboard', 'Projects', 'Tasks', 'Reports', 'Settings'].map((item) => (
              <li key={item}>
                <button className="w-full text-left px-4 py-2 text-gray-300 
                  hover:bg-gray-700 rounded-lg transition-colors">
                  {item}
                </button>
              </li>
            ))}
          </ul>
        </nav>
      </aside>
      
      <main className="flex-1 p-8 bg-gray-100">
        <h1 className="text-2xl font-bold text-gray-800">Main Content Area</h1>
      </main>
    </div>
  );
}

Best Practices

Maintain Design Consistency

When working in Tailwind CSS, it’s crucial to ensure your min-height values contribute to a cohesive and uniform project design. By setting consistent constraints across your layouts, you can minimize the risk of variable spacing issues and streamline the overall look and feel. For instance, maintaining a consistent min-height for cards in a grid ensures that elements align naturally, regardless of varying text content.

Additionally, achieving design consistency is easier when you strategically extend your Tailwind theme with custom min-height values.

Leverage Utility Combinations

Combining multiple utility classes in Tailwind lets you create professional designs, even when working with min-height. For instance, use min-h-screen alongside items-center and justify-center to vertically center child content within a full-screen layout. This eliminates the need for verbose custom CSS while delivering clean and responsive designs.

Consider coupling responsive utilities like sm:min-h-24, md:min-h-48, and so forth to target particular breakpoints. This allows components like hero sections and banners to adapt fluidly to various screen sizes. Pairing min-h utilities with max-h or h-auto can also ensure your layout behaves predictably when content or screen sizes fluctuate.

Accessibility Considerations

Enhance Readability and Navigability

Applying appropriate min-height values ensures that your content retains adequate space for readability and navigability. For users who rely on screen magnifiers or zoom features, this approach guarantees the text doesn't become cramped or difficult to follow. For example, ensure larger sections like navigation menus or hero sections use min-h-* utilities to maintain clarity.

Avoid over-cluttering smaller areas with too-tight min-height values, as it can hinder readability for those with cognitive or visual impairments. Instead, incorporate generous spacing by using relative units (like min-h-[20%]) to emphasize content hierarchy.

Support Accessible Interactive Elements

Interactive elements such as dropdown menus, tooltips, or modals should use reasonable min-height values to prevent user frustration. A dropdown menu with improper constraints, for example, might collapse or overflow, making it difficult to navigate with assistive devices.

Finally, ensure that interactive elements resize gracefully on large or small screens by combining responsive utilities (md:min-h-16, lg:min-h-20) with state-based transitions. This reduces the risk of inaccessible components across varying workflows.

Debugging Common Issues

Resolve Common Problems

Encountering issues like unintended content overflow or inconsistent vertical alignment when using min-height is common, but fixable. Restructuring utilities like overflow-hidden or overflow-scroll alongside min-h can provide immediate solutions. For example, apply overflow-auto to restricted containers for smoother scrolling behavior.

Isolate Utility Conflicts

Tailwind CSS allows utility stacking, which can sometimes lead to unexpected results if multiple classes override a single property. Use semantic combinations of utility names and avoid applying redundant classes like min-h-64 and h-64 unless absolutely necessary.

Debugging conflicts often requires isolating the cause. Use browser DevTools to inspect the applied styles and determine whether min-height is being overridden by parent classes. Use Tailwind’s !important modifiers sparingly to enforce priority when absolutely required (e.g., !min-h-[300px]).

Max WidthMax Height

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy