-
|
When i use tailwind, child div heigth is 0: Without tailwind it works: |
Beta Was this translation helpful? Give feedback.
Replies: 13 comments 5 replies
-
|
I wouldn't expect the It may have been that you had some extra CSS/DOM elements when testing with the |
Beta Was this translation helpful? Give feedback.
-
|
Check the installation, maybe you missed a step or see my other discussions |
Beta Was this translation helpful? Give feedback.
-
|
The installation is done correctly. The code with the style doesn't work only on https://play.tailwindcss.com/. Try here https://onecompiler.com/html/3zsfykc9q or create an html by hand and you will see that it works, the child will take all the available height |
Beta Was this translation helpful? Give feedback.
-
|
Didn't include the html structure such as html tags, head, and body? Replace min-h-screen with h-screen or If you want to display a blue box, use vh or an exact number like h-40 or h-[5rem], also use width if necessary. <div class="h-screen">
<div class="h-full bg-blue-500">
</div>
</div>
<div class="h-48">
<div class="h-full bg-blue-500">
</div>
</div>
<div class="h-screen bg-zinc-400">
<div class="w-20 h-20 bg-red-500">
</div>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
Interesting! So it seems like it works when you don't include <!DOCTYPE html>
<div style="min-height:100vh">
<div style="height:100%; background-color:blue;"></div>
</div>and here is the Tailwind version working with no <div class="min-h-screen">
<div class="h-full bg-blue-500">
</div>
</div>Neither option works in Tailwind Play because it automatically adds |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I included them. Same result |
Beta Was this translation helpful? Give feedback.
-
@adydetra they would not need to be included – the browser will include them automatically. |
Beta Was this translation helpful? Give feedback.
-
|
So this should be expected? A child element with EDIT: I might be noticing a different problem, in particular when the child element is in a different component from the parent element (vue) |
Beta Was this translation helpful? Give feedback.
-
|
Yes the same behaviour is happening in react. |
Beta Was this translation helpful? Give feedback.
-
|
Remove |
Beta Was this translation helpful? Give feedback.
-
|
When removing in svelte(kit), firefox gives me this warning: Removing it may just be forcing the browser to function in a more lenient mode, fixing the issue with tailwind as a side effect. I have a feeling a bug would need to be opened as removing doctype is more of a hack/workaround. Can someone back my reasoning on this? |
Beta Was this translation helpful? Give feedback.
-
|
What I found regarding the removal of is that it violates web standards. |
Beta Was this translation helpful? Give feedback.
-
|
what did you do ? |
Beta Was this translation helpful? Give feedback.
-
|
min-h-* is not working on React, and the beheavor is same, if I use min-h-40 it doesnt works but if I use something like min-h-[value px] it works . Any update about it? |
Beta Was this translation helpful? Give feedback.
-
|
min-h-* doesn't work to me either, while max-h-* works well :) |
Beta Was this translation helpful? Give feedback.
-
|
Almost I will say all utilities class works but this one not works as expected I don´t. I using Next js so to solve this I chose min-w-[value] |
Beta Was this translation helpful? Give feedback.
-
|
Wanted to report this issue as well. |
Beta Was this translation helpful? Give feedback.
Interesting! So it seems like it works when you don't include
<!DOCTYPE html>.For example, here is your snippet not working with
<!DOCTYPE html>added:and here is the Tailwind version working with no
<!DOCTYPE html>:Neither option works in Tailwind Play because it automatically adds
<!DOCTYPE html>to the document.