Browser Support
Flex Direction
Flex Wrap
Justify Items
Justify Self
Menu

Tailwind CSS Height

Height defines how tall elements appear on the interface. The flexibility of height properties allows developers to manage fixed dimensions, responsive scaling, and dynamic sizing efficiently.

Tailwind CSS simplifies this process with an extensive range of utility classes for height management. These classes are designed for quick implementation, allowing you to achieve diverse layouts and responsive designs. This guide explores how to use height utilities in Tailwind CSS:

ClassPropertiesExample
h-0height: 0px;<div className="h-0"></div>
h-pxheight: 1px;<div className="h-px"></div>
h-0.5height: 0.125rem; <div className="h-0.5"></div>
h-1height: 0.25rem; <div className="h-1"></div>
h-1.5height: 0.375rem; <div className="h-1.5"></div>
h-2height: 0.5rem; <div className="h-2"></div>
h-2.5height: 0.625rem; <div className="h-2.5"></div>
h-3height: 0.75rem; <div className="h-3"></div>
h-3.5height: 0.875rem; <div className="h-3.5"></div>
h-4height: 1rem; <div className="h-4"></div>
h-5height: 1.25rem; <div className="h-5"></div>
h-6height: 1.5rem; <div className="h-6"></div>
h-7height: 1.75rem; <div className="h-7"></div>
h-8height: 2rem; <div className="h-8"></div>
h-9height: 2.25rem; <div className="h-9"></div>
h-10height: 2.5rem; <div className="h-10"></div>
h-11height: 2.75rem; <div className="h-11"></div>
h-12height: 3rem; <div className="h-12"></div>
h-14height: 3.5rem; <div className="h-14"></div>
h-16height: 4rem; <div className="h-16"></div>
h-20height: 5rem; <div className="h-20"></div>
h-24height: 6rem; <div className="h-24"></div>
h-28height: 7rem; <div className="h-28"></div>
h-32height: 8rem; <div className="h-32"></div>
h-36height: 9rem; <div className="h-36"></div>
h-40height: 10rem; <div className="h-40"></div>
h-44height: 11rem; <div className="h-44"></div>
h-48height: 12rem; <div className="h-48"></div>
h-52height: 13rem; <div className="h-52"></div>
h-56height: 14rem; <div className="h-56"></div>
h-60height: 15rem; <div className="h-60"></div>
h-64height: 16rem; <div className="h-64"></div>
h-72height: 18rem; <div className="h-72"></div>
h-80height: 20rem; <div className="h-80"></div>
h-96height: 24rem; <div className="h-96"></div>
h-autoheight: auto;<div className="h-auto"></div>
h-1/2height: 50%;<div className="h-1/2"></div>
h-1/3height: 33.333333%;<div className="h-1/3"></div>
h-2/3height: 66.666667%;<div className="h-2/3"></div>
h-1/4height: 25%;<div className="h-1/4"></div>
h-2/4height: 50%;<div className="h-2/4"></div>
h-3/4height: 75%;<div className="h-3/4"></div>
h-1/5height: 20%;<div className="h-1/5"></div>
h-2/5height: 40%;<div className="h-2/5"></div>
h-3/5height: 60%;<div className="h-3/5"></div>
h-4/5height: 80%;<div className="h-4/5"></div>
h-1/6height: 16.666667%;<div className="h-1/6"></div>
h-2/6height: 33.333333%;<div className="h-2/6"></div>
h-3/6height: 50%;<div className="h-3/6"></div>
h-4/6height: 66.666667%;<div className="h-4/6"></div>
h-5/6height: 83.333333%;<div className="h-5/6"></div>
h-fullheight: 100%;<div className="h-full"></div>
h-screenheight: 100vh;<div className="h-screen"></div>
h-svhheight: 100svh;<div className="h-svh"></div>
h-lvhheight: 100lvh;<div className="h-lvh"></div>
h-dvhheight: 100dvh;<div className="h-dvh"></div>
h-minheight: min-content;<div className="h-min"></div>
h-maxheight: max-content;<div className="h-max"></div>
h-fitheight: fit-content;<div className="h-fit"></div>

Overview of Height

Adding Fixed Height

Predefined scales are particularly effective when your design requires uniform height proportions. Use these fixed height utilities- h-2, h-3, h-4, etc. to set heights based on Tailwind's spacing scale.

This is a live editor. Play around with it!
export default function App() {
  return (
    <>
      <img 
        className="h-32 mx-20 my-32"
        src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf"
        alt="Fixed height in Tailwind CSS" 
      />
      {/* h-32 => height: 8rem; */}
    </>
  );
}

Adding Full Height

A full-height utility allows you to stretch an element's height to fully cover its parent container or viewport. This is useful for creating immersive sections or hero banners.

This is a live editor. Play around with it!
export default function FullHeightSection() {
  return (
    <div className="h-60 w-screen bg-green-100 flex items-center justify-center">
      <h1 className="h-full w-60 text-lg text-center bg-sky-200 px-8 pt-16">This section covers the full height of the parent container</h1>
      {/* h-60 => height: 15rem; */}
    </div>
  );
}

Adding Viewport Height

h-screen utility can be used to make an element cover the entire height of the viewport:

This is a live editor. Play around with it!
export default function ResponsiveViewportHeight() {
  return (
    <div className="h-screen text-center text-lg px-8 pt-40 w-screen bg-red-100">
      This element will cover 100% of the viewport height.
    </div>
  );
}

Adding Dynamic Viewport Height

Dynamic viewport height utility allows elements to cover the whole viewport height as the UI shrinks or expands.

This is a live editor. Play around with it!
export default function DynamicViewport() {
  return (
    <div className="h-dvh w-screen bg-yellow-100 text-lg px-8 pt-40 text-center">
      This element will cover 100% of the viewport height as UI shrinks or expands.
    </div>
  );
}

Adding Large Viewport Height

Large viewport height utility allows define the height upto the largest possible extent, similar to h-screen.

This is a live editor. Play around with it!
export default function LargeFullView() {
  return (
    <div className="h-lvh w-screen bg-blue-100 text-lg px-8 pt-40 text-center">
       This element's height will cover the largest possible extent of the viewport.
    </div>
  );
}

Adding Small Viewport Height

Small viewport height utility allows define the height upto the smalles possible extent.

This is a live editor. Play around with it!
export default function SmallScreen() {
  return (
    <div className="h-svh w-screen bg-gray-100 text-lg px-8 pt-40 text-center">
       This element's height will cover the smallest possible extent of the viewport.
    </div>
  );
}

States and Responsiveness

Hover and Focus States

You can conditionally modify the height of an element on user interactions, such as hovering or focusing. Use modifiers like hover, focus, etc. to target these states.

This is a live editor. Play around with it!
export default function InteractiveState() {
  return (
    <div className="bg-indigo-300 w-screen flex justify-center py-10 h-screen">
      <div className="h-16 w-16 bg-indigo-600 hover:h-32 transition-all">
        {/* hover:h-32 => height changes to 8rem on hover */}
      </div>
    </div>
  );
}

Breakpoint Modifiers

Breakpoints allow you to adjust element heights based on screen size for responsive designs. Use modifiers like sm, md, etc. to target individual breakpoints.

This is a live editor. Play around with it!
export default function ResponsiveSize() {
  return (
    <div className="bg-indigo-300 w-screen flex justify-center py-10 h-screen">
      <div className="h-16 w-16 bg-indigo-600 lg:h-32 xl:h-48 transition-all">
        {/* h-16 => height: 4rem; lg:h-32 => height: 8rem; xl:h-48 => height: 12rem; */}
      </div>
    </div>
  );
}

Custom Height

You can also customize Tailwind's theme to define unique height values that align with your branding or design guidelines.

Extending the Theme

Modify your tailwind.config.js file to add custom values directly into your project.

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

export default function CustomThemeHeight() {
return (
<div className="h-custom-72 w-screen bg-pink-300 flex justify-center items-center">
<p className="text-lg px-12 text-center">This container has a custom height of 18rem.</p>
{/* h-custom-72 => height: 18rem; */}
</div>
);
}

Using Arbitrary Values

In scenarios where quick runtime values can fill in, Tailwind allows arbitrary values to suit your requirements.

This is a live editor. Play around with it!
export default function ArbitraryHeight() {
  return (
    <div className="h-[14rem] w-screen bg-teal-200">
      <h1 className="text-center text-lg py-8 px-12">
        This container has an arbitrary height of 14 rem.
      </h1>
      {/* h-[14rem] => height: 14rem; */}
    </div>
  );
}

Real World Examples

Product Gallery with Dynamic Height Cards

This example demonstrates a responsive product gallery with cards that adjust their height based on content.

This is a live editor. Play around with it!
export default function ProductGallery() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Bag",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa",
      alt: "Brown leather messenger bag"
    },
    {
      id: 2,
      name: "Minimalist Watch",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1524592094714-0f0654e20314",
      alt: "Silver analog watch"
    },
    {
      id: 3,
      name: "Wireless Headphones",
      price: "$249.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 4,
      name: "Smart Speaker",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1543512214-318c7553f230",
      alt: "Smart home speaker"
    },
    {
      id: 5,
      name: "Laptop Stand",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "Aluminum laptop stand"
    },
    {
      id: 6,
      name: "Mechanical Keyboard",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical keyboard"
    }
  ];

return (

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
  {products.map((product) => (
    <div key={product.id} className="bg-white rounded-lg shadow-lg h-[350px]">
      <img
        src={product.src}
        alt={product.alt}
        className="w-full h-[250px] object-cover rounded-t-lg"
      />
      <div className="p-4">
        <h3 className="text-xl font-bold">{product.name}</h3>
        <p className="text-gray-600">{product.price}</p>
      </div>
    </div>
  ))}
</div>
); }

Vertical Timeline with Fixed Heights

A timeline component that uses fixed heights for consistent spacing.

This is a live editor. Play around with it!
export default function VerticalTimeline() {
  const events = [
    {
      id: 1,
      date: "Jan 2023",
      title: "Company Founded",
      description: "Launch of our startup journey"
    },
    {
      id: 2,
      date: "Mar 2023",
      title: "First Major Client",
      description: "Secured partnership with Fortune 500 company"
    },
    {
      id: 3,
      date: "May 2023",
      title: "Team Expansion",
      description: "Grew to 20 team members"
    },
    {
      id: 4,
      date: "Jul 2023",
      title: "Product Launch",
      description: "Released our flagship product"
    },
    {
      id: 5,
      date: "Sep 2023",
      title: "International Expansion",
      description: "Opened offices in Europe"
    },
    {
      id: 6,
      date: "Dec 2023",
      title: "Series A Funding",
      description: "Raised $10M in funding"
    }
  ];

return (

<div className="max-w-2xl mx-auto p-4">
  {events.map((event) => (
    <div
      key={event.id}
      className="relative h-[150px] border-l-2 border-blue-500 ml-4 mb-4"
    >
      <div className="absolute w-4 h-4 bg-blue-500 rounded-full -left-[9px] top-0"></div>
      <div className="ml-6">
        <span className="text-sm text-blue-500">{event.date}</span>
        <h3 className="text-lg font-bold">{event.title}</h3>
        <p className="text-gray-600">{event.description}</p>
      </div>
    </div>
  ))}
</div>
); }

Full-Height Hero Section with Scroll Indicator

A hero section that takes up the full viewport height with a scroll indicator.

This is a live editor. Play around with it!
export default function HeroSection() {
  const heroData = {
    title: "Welcome to the Future",
    subtitle: "Innovative Solutions for Tomorrow",
    backgroundImage: "https://images.unsplash.com/photo-1451187580459-43490279c0fa",
    alt: "Futuristic city landscape"
  };

return (

<div className="relative h-screen">
<div
className="absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: `url(${heroData.backgroundImage})` }} >
<div className="absolute inset-0 bg-black bg-opacity-50"></div>
</div>

      <div className="relative h-full flex flex-col items-center justify-center text-white">
        <h1 className="text-5xl font-bold px-6 mb-4">{heroData.title}</h1>
        <p className="text-xl">{heroData.subtitle}</p>

        <div className="absolute bottom-8 animate-bounce">
          <div className="w-1 h-16 bg-white rounded-full mx-auto"></div>
        </div>
      </div>
    </div>

);
}

Multi-Level Dashboard Sidebar

A dashboard sidebar with varying heights for different menu sections.

This is a live editor. Play around with it!
export default function DashboardSidebar() {
  const menuItems = [
    {
      id: 1,
      section: "Main",
      items: [
        { name: "Dashboard", icon: "📊" },
        { name: "Analytics", icon: "📈" },
        { name: "Reports", icon: "📑" }
      ]
    },
    {
      id: 2,
      section: "Management",
      items: [
        { name: "Products", icon: "📦" },
        { name: "Orders", icon: "🛍️" }
      ]
    },
  ];

return (

<div className="w-64 bg-gray-800 text-white h-screen">
  {menuItems.map((section) => (
    <div key={section.id} className="py-4">
      <h3 className="px-4 text-sm text-gray-400 uppercase">
        {section.section}
      </h3>
      <div className="mt-2">
        {section.items.map((item, index) => (
          <div
            key={index}
            className="px-4 py-2 hover:bg-gray-700 cursor-pointer h-12 flex items-center"
          >
            <span className="mr-2">{item.icon}</span>
            {item.name}
          </div>
        ))}
      </div>
    </div>
  ))}
</div>
); }

Team Member Grid with Variable Heights

A responsive grid showing team members with cards that adjust height based on content.

This is a live editor. Play around with it!
export default function TeamGrid() {
  const teamMembers = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      bio: "10+ years of startup experience",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson headshot"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      bio: "Former Google engineer with extensive backend experience",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Michael Chen headshot"
    },
    {
      id: 3,
      name: "Emily Rodriguez",
      role: "Design Lead",
      bio: "Award-winning designer with focus on UX",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Rodriguez headshot"
    },
    {
      id: 4,
      name: "David Kim",
      role: "Product Manager",
      bio: "Specializes in agile methodologies",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "David Kim headshot"
    },
    {
      id: 5,
      name: "Lisa Patel",
      role: "Marketing Director",
      bio: "Digital marketing expert with MBA",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Patel headshot"
    },
    {
      id: 6,
      name: "James Wilson",
      role: "Sales Lead",
      bio: "15+ years in enterprise sales",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "James Wilson headshot"
    }
  ];

return (

<div className="p-8 bg-gray-100">
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {teamMembers.map((member) => (
      <div
        key={member.id}
        className="bg-white rounded-xl shadow-lg overflow-hidden min-h-[300px] hover:min-h-[320px] transition-all duration-300"
      >
        <div className="h-48 overflow-hidden">
          <img
            src={member.src}
            alt={member.alt}
            className="w-full h-full 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-2">{member.bio}</p>
        </div>
      </div>
    ))}
  </div>
</div>
); }

Customization Examples

Responsive Product Card with Custom Height Breakpoints

This example demonstrates how to create a product card with custom heights at different breakpoints.

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

// App.js
export default function ProductCard() {
return (

<div className="my-14 max-w-sm mx-auto">
<div className="bg-white rounded-lg shadow-xl overflow-hidden">
<div className="relative h-product-sm md:h-product-md lg:h-product-lg">
<img
            src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
            alt="Product"
            className="absolute w-full h-full object-cover"
          />
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 p-4">
<h2 className="text-white text-xl font-bold">Limited Edition Sneakers</h2>
<p className="text-gray-200">$199.99</p>
</div>
</div>
</div>
</div>
)
}

Dynamic Height Dashboard Sidebar

This example shows how to create a dashboard sidebar with custom height utilities.

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

// App.js
export default function DashboardSidebar() {
return (

<div className="flex">
<aside className="w-64 bg-gray-800 h-sidebar-default">
<div className="p-4">
<div className="flex items-center space-x-3 mb-8">
<img
              src="https://images.unsplash.com/photo-1599305445671-ac291c95aaa9"
              alt="Logo"
              className="w-8 h-8 rounded-full"
            />
<h1 className="text-white text-lg font-semibold">Dashboard</h1>
</div>

          <nav className="space-y-4">
            {['Home', 'Analytics', 'Projects', 'Settings'].map((item) => (
              <a
                key={item}
                href="#"
                className="block px-4 py-2 text-gray-300 hover:bg-gray-700 rounded-md"
              >
                {item}
              </a>
            ))}
          </nav>
        </div>
      </aside>
    </div>

)
}

Custom Height Image Gallery Grid

This example demonstrates creating an image gallery with varying custom heights.

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

// App.js
export default function ImageGallery() {
const images = [
{ id: 1, height: 'gallery-tall', url: 'https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf' },
{ id: 2, height: 'gallery-medium', url: 'https://images.unsplash.com/photo-1508873699372-7aeab60b44ab' },
{ id: 3, height: 'gallery-small', url: 'https://images.unsplash.com/photo-1488998427799-e3362cec87c3' },
{ id: 4, height: 'gallery-medium', url: 'https://images.unsplash.com/photo-1517059224940-d4af9eec41b7' }
]

return (

<div className="container mx-auto p-8">
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
{images.map((image) => (
<div
key={image.id}
className={`relative rounded-lg overflow-hidden h-${image.height} transition-transform hover:scale-[1.02]`} >
<img
src={image.url}
alt={`Gallery image ${image.id}`}
className="absolute w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-black/20 opacity-0 hover:opacity-100 transition-opacity">
<button className="absolute bottom-4 right-4 bg-white px-4 py-2 rounded-md text-sm font-medium">
View
</button>
</div>
</div>
))}
</div>
</div>
)
}

Best Practices

Maintain Design Consistency

Stick to pre-defined classes like h-16, h-32, and h-64 rather than relying on arbitrary heights whenever possible. This approach reduces visual clutter.

You can also create custom height scales in your tailwind.config.js file to maintain consistency if your project’s design systems require specific measurements. For instance, defining a series of custom heights for a card component used across your web app ensures standardized dimensions. Pair these height utilities with standardized padding (p-*) and margin (m-*) classes to maintain proportional spacing.

Additionally, ensure consistency by aligning heights with breakpoints to enable responsive designs. For instance, height variations based on screen size—like h-24 md:h-48 lg:h-64—help different elements adapt seamlessly across different devices while keeping the overall design visually consistent.

Leverage Utility Combinations

Combining height utilities with complementary classes like w-*, flex, and spacing utilities allows you to create intricate layouts efficiently. For example, combining h-screen with flex justify-center items-center can help you center content vertically and horizontally on full-height sections. Similarly, you could add classes like p-* to maintain proper spacing.

You can also combine min-h-* and max-h-* utilities with responsive prefixes to control the vertical expansion and contraction of elements on different screens. This combination is particularly useful for creating scrollable sections where the height is constrained within a maximum limit while ensuring a responsive minimum height.

Accessibility Considerations

Enhance Readability and Navigability

Ensure sufficient vertical spacing between interactive elements or content blocks by using h-* utilities. You can also use responsive height utilities (md:h-*, lg:h-*) to cater to varying screen sizes, enhancing accessibility both for smaller devices and larger monitors.

Organize content hierarchically within vertically spaced containers to direct user attention appropriately. Avoid assigning extremely small heights to your elements. Instead, aim for readable dimensions and use responsive adjustments alongside padding utilities to create legible and accessible designs.

Focus on High Contrast

Combining proper height utilities with high-contrast colors significantly improves accessibility for visual impairments. Ensure backgrounds covering a full section or element (h-screen, h-full) have contrasting text colors to improve readability. For example, pairing a bg-gray-800 with text-white ensures sufficient contrast for text that spans the entire height of a container.

Debugging Common Issues

Handle Nested Element Challenges

When facing height-related issues in deeply nested structures, excessive utility overrides can cause conflicts. Manage these nested hierarchies by explicitly defining heights at different container levels using utilities like h-auto, min-h-*, and max-h-*. This ensures that children nodes adapt appropriately without exceeding or shrinking unexpectedly within parent containers.

Isolate Utility Conflicts

Utility conflicts often occur when multiple height-based classes unintentionally overwrite desired styling. To debug such issues, prioritize baseline values and only extend them as needed. When multiple height utilities are applied to the same element (e.g., h-32 and h-auto), use browser DevTools to inspect rendered styles and identify overrides.

You can also isolate conflicting classes by systematically removing and reapplying utilities to narrow the source of the problem. Use Tailwind’s !important modifier (!h-40) sparingly for critical corrections, but always aim for clean and readable utility combinations to create maintainable codebases.

Beyond utility inspection, validate the consistency of custom height additions in tailwind.config.js and their responsive usage. Conflicts often arise when arbitrary height values are unintentionally used beyond their intended scope. Keep configurations well-organized and well-documented to avoid such issues.

Place ItemsWidth

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy