0

我使用 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中禁用继承

4

1 回答 1

0

我认为'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>
于 2021-08-26T19:10:12.150 回答