Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some of Tailwind's minimum height classes get ignored #3176

Closed
falkoschindler opened this issue Jun 6, 2024 Discussed in #3169 · 3 comments · Fixed by #3654
Closed

Some of Tailwind's minimum height classes get ignored #3176

falkoschindler opened this issue Jun 6, 2024 Discussed in #3169 · 3 comments · Fixed by #3654
Labels
bug Something isn't working
Milestone
2.0.0

Comments

@falkoschindler
Copy link
Contributor

falkoschindler commented Jun 6, 2024 •
edited
Loading

Discussed in #3169

Originally posted by v479038280 June 4, 2024
This works:

ui.card().classes('min-h-[220px]')

This doesn't work:

ui.card().classes('min-h-96')
@falkoschindler falkoschindler added the bug Something isn't working label Jun 6, 2024
@falkoschindler
Copy link
Contributor Author

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/quasar@2.16.4/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/quasar@2.16.4/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?

@falkoschindler falkoschindler added the help wanted Extra attention is needed label Jun 6, 2024
@python-and-fiction
Copy link
Contributor

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).

@falkoschindler
Copy link
Contributor Author

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.

@falkoschindler falkoschindler added this to the 2.0.0 milestone Jun 21, 2024
@falkoschindler falkoschindler removed the help wanted Extra attention is needed label Jun 21, 2024
@falkoschindler falkoschindler linked a pull request Aug 30, 2024 that will close this issue
Update JavaScript dependencies #3654
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
2.0.0
Development

Successfully merging a pull request may close this issue.

Update JavaScript dependencies zauberzeug/nicegui
2 participants
@falkoschindler @python-and-fiction