How to Specify Height to Fit-Content with Tailwind CSS ?

Last Updated : 14 Oct, 2024

Specifying height to fit-content in Tailwind CSS means setting an element’s height to automatically adjust based on its content. Tailwind provides the h-fit utility class, which ensures the element's height dynamically adapts to its content's size.

Adjusting Height with h-fit in Tailwind CSS

This approach utilizes the h-fit utility class in Tailwind CSS to dynamically adjust a container's height to fit its content, whether text, images, or lists. This ensures a responsive layout by automatically adapting to the content’s size.

Syntax

<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: Adjusting the Height of a Text Container

In this example we are using Tailwind CSS to create a fit-content container. It includes styled text about web technology and how browsers display web content.

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:

Example 2: Adjusting the Height of an Image Container

In this example, we use Tailwind CSS to create a fit-content container with an image. The logo is displayed with proper styling using the h-fit class.

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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" 
            alt="gfg-logo">
    </div>
</body>

</html>

Output:

How to specify height: fit-content with TailwindCSS? — Adjusting Height with h-fit in Tailwind CSS Example Output

Example 3: Adjusting the Height of a List Container

Here we use Tailwind CSS to create a fit-content container with a list of items, styled with padding and a gray background for clarity.

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 Create Gradient Text with Tailwind CSS?

rohitdalvi

Improve

Article Tags :

How to Specify Height to Fit-Content with Tailwind CSS ?

Adjusting Height with h-fit in Tailwind CSS

Syntax

Example 1: Adjusting the Height of a Text Container

Example 2: Adjusting the Height of an Image Container

Output:

Example 3: Adjusting the Height of a List Container

Similar Reads

Thank You!

What kind of Experience do you want to share?