как отключить наследование при попутном ветре?

Question

Я использую tailwind-css для стилизации моих компонентов в Nuxtjs и моих компонентов.

и это мои классы стиля

      .ccard {
  @apply bg-white px-2 py-10;
  &-header {
    @apply relative;
    &-btn {
      @apply btn btn-circle btn-sm  btn-primary px-0 border-0;
    }
    &-img {
      // width: 100%;
      // height: 100%;
      @apply object-cover  w-full;
    }
  }
  &-detail {
    @apply text-center pt-2 px-1;
    &-cat {
      @apply text-sm text-gray-400 mb-2;
    }
    &-title {
      @apply text-lg font-semibold;
    }
  }
}

а это мой шаблон компонента

      <template>
  <div class="ccard">
    <div class="ccard-header">
      <button class="ccard-header-btn">
        <magnify />
      </button>
      <img :src="data.src" class="ccard-header-img" alt="" />
    </div>
    <div class="ccard-detail">
      <div class="ccard-detail-cat">{{ data.cat }}</div>
      <div class="ccard-detail-title">{{ data.title }}</div>
    </div>
  </div>
</template>

и это результат, я ожидаю, что кнопка будет кругом, НО это не так! Я получил осмотр, и он унаследовал минимальную высоту откуда-то, я не знаю, где это. и я думаю, что дочерние теги попутного ветра наследуют свои родительские классы тегов, и я думаю, что это не хорошо.

как я могу отключить наследование в попутном ветре-css

Answer 1

Я думаю, что наследование в «попутном ветре-css» - не ваша проблема. У меня есть два ответа на этот вопрос:

1) вы должны проверить, чтобы увеличить внутри btn, возможно, у него есть небольшой x-margin или x-padding

2) вы должны установить определенные классы ширины и высоты (w-10 h-10) в значке.

посмотрите на этот код:

        <button class="bg-green-400 rounded-full">
    <img class="w-10 h-10 p-2" src="https://img.icons8.com/ios-glyphs/30/000000/search--v1.png"/>
  </button>