htmlcsstailwind-cssdaisyui

DaisyUI and TailwindCSS min-h-0 for collapse component

I am using:

I put a "collapse" component with smaller "text-xs" in my HTML. The problem is that there is lots of space around the text so I want to minimize that. See:

collapse component with empty space

I have this code:

    <div class="bg-base-100 border-base-300 collapse border text-xs">
        <input type="checkbox"/>
        <div class="collapse-title">
            How do I create an account?
        </div>
        <div class="collapse-content">
            Click the "Sign Up" button in the top right corner and follow the registration process.
        </div>
    </div>

The problem is that if I put "min-h-0" on the "collapse-title", nothing happens.

After some debugging, seems that checkbox has min-height set, so I also give it a class "min-h-0". Again, there is no change.

Only after I set its style to "min-height: 0px;", I can see a desired effect:

collapse component with no empty space

Can someone help explain what is happening here? Is this a bug in one of these libraries or am I misunderstanding how these properties can be overriden?

Solution

  • Although using !important can often lead to quick results, it's worth digging deeper into the issue to find a solution with the appropriate specificity, without relying on !important.

    Let's take a look at the .collapse styling. It appears that min-height is defined in two cases:

    .collapse {
  /* ... */
  > input:is([type="checkbox"], [type="radio"]) {
    grid-column-start: 1;
    grid-row-start: 1;
    appearance: none;
    opacity: 0;
    z-index: 1;
    width: 100%;
    padding: 1rem;
    padding-inline-end: 3rem;
    min-height: 3.75rem; /* HERE */
    transition: background-color 0.2s ease-out;
  }
 
  /* ... */

  &:is([open], :focus:not(.collapse-close)) > .collapse-content, &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
    visibility: visible;
    min-height: fit-content; /* HERE */
  }

  /* ... */
}
.collapse {
  visibility: collapse;
}

    Additionally, the .collapse-title has a fixed value of 3.75rem on its own.

    .collapse-title {
  grid-column-start: 1;
  grid-row-start: 1;
  position: relative;
  width: 100%;
  padding: 1rem;
  padding-inline-end: 3rem;
  min-height: 3.75rem; /* HERE */
  transition: background-color 0.2s ease-out;
}

    That's why @Pouya suggested the two solutions provided: (1.) using a class with !important or (2.) overriding it in CSS with appropriate specificity.

    I don't quite understand why min-height is set to a fixed value of 3.75rem. Considering that TailwindCSS v4 targets modern browsers (and consequently DaisyUI v5, which is built on TailwindCSS v4),

    I would use the 1lh unit to control height throughout the entire project - if such height enforcement is truly necessary.

    .collapse {
  > input,
  > .collapse-title {
    min-height: 1lh;
  }
}