CODEWITHSUNDEEP
csstailwind-css
user8472012
user8472012

Reputation:

Min-height not working properly with tailwind

I'm using the tailwind class min-h-screen but it's not changing the height of the element. It's not even displayed in the dev tools. When setting the height in the style property like style="height: 100vh;" it changes the height of the element.

<div class="bg-white flex-1 p-6 flex flex-col w-3/4 xl:w-full 
z-10 min-h-screen" style="box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.3);">
    content
</div>

The height ain't set anywhere else but there.

I came up editing the config file with minHeight: {'m100v': '100vh'} but the standard way should work, I guess.

Upvotes: 0

Views: 6069

Answers (1)

Mihai T
Mihai T

Reputation: 17687

I understand you've put custom values for minHeight in your tailwind config. It doesn't matter if they are different than the default ones, the default ones will be ignored.

So, if you want to add custom values you need to extend your theme object . See below

module.exports = {

   theme: {
      extend: {
       minHeight: {
           'custom': '234',
           }
      },
   }
}

Then you leave the default values ones intact.

Upvotes: 1

Related Questions