Question 195240 in Html Question posted in
Some basic documentation can be found here.

Html – how to use tailwind to show a div with fixed size without any content in the div?

I know in plain css you can set the min and max width. but when I try min-h-10 and max-h-10 it doesn’t do anything in tailwind.

So this is what I have:

<body>
    <div class="flex-col justify-center">
        <div class="h-10 w-10 border bg-blue-300 block">
            h
        </div>
    </div>
</body>
Tags:

3

Answers


  1. 0 
    To create a div with a fixed size using Tailwind CSS, you can use the 
utility classes provided by Tailwind. Here's an example of how you can 
achieve this:
 <div class="w-64 h-64 bg-gray-300"></div>
 In the above code, the w-64 class sets the width of the div to 64 pixels, 
and the h-64 class sets the height of the div to 64 pixels. The bg-gray-300 
class gives the div a background color of gray-300.

If you want to center the div horizontally and vertically within its 
container, you can use the flex and items-center classes in combination:
 <div class="flex items-center justify-center w-64 h-64 bg-gray-300">
    <!-- Content goes here if needed -->
 </div>

In this case, the flex class makes the div a flex container, and the items- 
center class centers its contents vertically. The justify-center class 
centers the contents horizontally.

 Feel free to adjust the width, height, and background color classes 
 (w-64,  h-64, bg-gray-300) as per your requirements.
    Login or Signup to reply.
  2. 0

    In TailwindCSS you can set your custom values like this:

    <div class="flex-col justify-center items-center">
<div class="min-h-[100px] min-w-[100px] border bg-blue-300 block">
    h
</div>
    Login or Signup to reply.
  3. 0

    Values like min-h-10 and max-h-10 aren’t valid values in Tailwind CSS, the only valid values are min-h-0, min-h-full, min-h-screen, min-h-min, min-h-max, min-h-fit.

    So, the only way to use values like min-h-10 is by using custom values where you can customize your min-height scale by editing theme.minHeight or theme.extend.minHeight in your tailwind.config.js file like take the following example.

    Your tailwind.config.js file:

    module.exports = {
  theme: {
    maxHeight: {
      '10': '10px',
    }
  }
}

    Your code:

    <div class="max-h-10 w-32 bg-red-400">
  I'm an element!
</div>

    See the playground

    Or if you need to use a one-off min-height value that doesn’t make sense to include in your theme, you can use arbitrary values like below:

    <div class="max-h-[10px] w-32 bg-red-400">
  I'm an element!
</div>

    See the playground

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search