collapse visibility: collapse

[Syiana]

3.2.0 - 2022-10-19
Add new collapse utility for visibility: collapse tailwindlabs/tailwindcss#9181

daisyui collapse is not visibility by default now

[szluyufeng]

I got the same problem. Have you figured it out?

[Syiana]

@szluyufeng

I fixed it with this for now:

tailwind.css

@layer utilities {
.collapse {
visibility: visible;
}
}

[szluyufeng]

@Syiana Thanks, it works. But the collapse can not be collapsed now.

[saadeghi]

Thanks for reporting this.
Fixed in version 2.33.0: https://play.tailwindcss.com/6H2smF4tRz?file=config

Really hard to deal with it when a new version of Tailwind CSS adds a new class name that already exists in daisyUI 🤐
It's a minor release for Tailwind but I can't change the class name to something else because that would break all existing projects.

[Syiana]

@Syiana Thanks, it works. But the collapse can not be collapsed now.

I do this in vue anyway, that's why it works for me:

v-model="checked"

<template>
  <div class="collapse border rounded-xl">
  <input type="checkbox" v-model="checked"/>
  <div class="flex collapse-title text-xl font-medium p-4">
    {{data.title}}
      <Icon class="ml-auto transition ease-in-out" :class="{ 'rotate-90': checked }" name="ri:arrow-right-s-line" size="24"/>
  </div>
  <div class="collapse-content">
    <p>{{data.description}}</p>
  </div>
</div>
</template>

<script setup>
defineProps({
  open: { type: Boolean, default: false },
  data: Object,
  index: { type: Number, default: 0 }
})

const checked = ref(false)
</script>

[zed-wong]

Using 2.42.1 but still have the problem?

My code:

<div class="collapse">
  <input type="checkbox" /> 
  <div class="collapse-title text-xl font-medium">
    Click me to show/hide content
  </div>
  <div class="collapse-content"> 
    <p>hello</p>
  </div>
</div>

collapse is not showing.

Reason:

My solution:

<div class="collapse collapse-arrow border-base-300 rounded-2xl">
  <input type="checkbox" bind:checked={checked}/> 
  <div class="collapse-title text-sm font-medium">
    Click me to show/hide content
  </div>
  <div class="collapse-content"> 
    <p>hello</p>
  </div>
</div>

<style>
  .collapse {
    visibility: visible !important;
  }
</style>

[saadeghi]

@zed-wong Why your .collapse has !important?
Because I'm pretty sure nothing in Tailwind has !important by default. 🤔

[zed-wong]

@zed-wong Why your .collapse has !important? Because I'm pretty sure nothing in Tailwind has !important by default. 🤔

That was due to my configuration, as you linked, sorry for asking that dumb question XD

[Koaieus]

I would like to use both the DaisyUI collapse class and the Tailwind collapse class in my project, how would I go about separating these? Can I rename one of them somehow?

[dawmsi]

[Goondrious]

if you're seeing this in recent versions, you might be using important: true in tailwind config.

You can manually override using the same method daisyui does, but in your own globals.css:

.collapse:not(td):not(tr):not(colgroup) {
    visibility: visible !important;
  }