Open In App

How to specify height to fit-content with Tailwind CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Tailwind CSS is a popular utility-first CSS framework that makes it easy to create responsive and customizable user interfaces. The ability of Tailwind CSS to specify the height of an element using the fit-content value allows the height of an element to adjust to the content inside it, making it useful for creating dynamic layouts. In this article, we will build a small application to learn how to use the fit-content value in Tailwind CSS.

Syntax: To use the fit-content value in Tailwind CSS, we can use the h-fit utility class. The syntax for using the h-fit class is as follows:

<div class="h-fit">
      ...
</div>

This will set the height of the div element to the height of its content. We can also use the w-fit class to set the width of an element to the width of its content.

 

Example 1: Create a new HTML file and add the necessary HTML structure. Add some content to the div element and apply the h-fit class to it.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>Tailwind CSS - fit-content</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
  
<body>
    <div class="h-fit p-4 bg-gray-200">
        <p class="text-lg font-bold">
            Fit-content basic usage
        </p>
  
        <p>
            Web Technology refers to the various 
            tools and techniques that are utilized 
            in the process of communication 
            between different types of devices 
            over the internet. A web browser is 
            used to access web pages. Web 
            browsers can be defined as programs 
            that display text, data, pictures, 
            animation, and video on the Internet.
            Hyperlinked resources on the World 
            Wide Web can be accessed using 
            software interfaces provided by Web
            browsers.
        </p>
    </div>
</body>
  
</html>


Output:

 

The h-fit class adjusts the height of the div element to fit its content, which in this case is the text.

Example 2: In this example, we will demonstrate how to use the h-fit class to adjust the height of an image container to fit the image.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>Tailwind CSS fit-content</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
  
<body>
    <div class="h-fit m-10">
        <p class="text-lg font-bold">
            Fit-content with images
        </p>
          
        <img class="object-cover"
            src=
            alt="gfg-logo">
    </div>
</body>
  
</html>


Output:

How to specify height: fit-content with TailwindCSS?

How to specify height: fit-content with TailwindCSS?

Here, we have applied the h-fit class to a div element containing an image. The h-fit class adjusts the height of the div element to fit the image. The object-cover class applied to the img tag helps to maintain the aspect ratio of the image while filling the container.

Example 3: In this example, we will demonstrate how to use the h-fit class to adjust the height of a list container to fit its items.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>Tailwind CSS - fit-content</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
  
<body>
    <div class="h-fit p-4 bg-gray-200">
        <ul>
            <li class="mb-2">Item 1</li>
            <li class="mb-2">Item 2</li>
            <li class="mb-2">Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
</body>
  
</html>


Output:

How to specify height: fit-content with TailwindCSS?

How to specify height: fit-content with TailwindCSS?

Here, we have applied the h-fit class to a div element containing a list of items. The h-fit class adjusts the height of the div element to fit the items in the list. We have also applied the p-4 class to add some padding to the container, and the bg-gray-200 class to give it a light gray background color.



Last Updated : 05 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads