Discussed in <a class="issue-link js-issue-link" data-error-text="Failed to load titl

Oh great, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercar

Thanks for bringing this up, <a class="user-mention notranslate" data-hovercard-type="

Some of Tailwind's minimum height classes get ignored about nicegui HOT 3 OPEN

falkoschindler commented on July 24, 2024

Some of Tailwind's minimum height classes get ignored

from nicegui.

Comments (3)

falkoschindler commented on July 24, 2024 1

Oh great, @python-and-fiction!
Changing the Tailwind version in my example from #3176 (comment) to 3.2.0 (which is currently used by NiceGUI 1.4.x) breaks indeed the layout.

    <script src="https://cdn.tailwindcss.com/3.2.0"></script>

Since we usually update dependencies for major releases only, I'll schedule this fix for the upcoming 2.0.0.

from nicegui.

falkoschindler commented on July 24, 2024

Thanks for bringing this up, @v479038280!
This bug very strange. I tried to reproduce it with Quasar and Tailwind, but it works as expected:

<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div id="q-app" style="display: flex; flex-direction: column; align-items: start">
      <div class="bg-blue-100 min-h-[220px]">Hello</div>
      <div class="bg-blue-100 min-h-96">Hello</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
    <script>
      const app = Vue.createApp({ setup: () => ({}) });
      app.use(Quasar);
      app.mount("#q-app");
    </script>
  </body>
</html>

Does anyone have an idea what is going on?

from nicegui.

python-and-fiction commented on July 24, 2024

Maybe tailwindcss version is not 3.4.0 or newer.
I found the same problem in tailwindcss:
tailwindlabs/tailwindcss#12358 (comment)
The solution is upgrading tailwindcss to 3.4.3.
And i think falkoschindler 's code works well, because tailwindcss version in https://cdn.tailwindcss.com is newer than 3.4.0(3.4.4 for now).

from nicegui.

Recommend Projects