如何在顺风中禁用继承？答案

【问题标题】：How can disable inheritance in tailwind?如何在顺风中禁用继承？
【发布时间】：2021-10-26 19:40:47
【问题描述】：

我使用 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>

这是结果我希望按钮是一个圆圈，但它不是！我接受了检查，它从某个我不知道它在哪里的地方继承了一个最小高度。我认为顺风子标签继承了它们的父标签类，我认为这不好。

如何在 tailwind-css 中禁用继承

【问题讨论】：

标签： html css tailwind-css tailwind-ui

【解决方案1】：

我认为'tailwind-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>

【讨论】：