如何在顺风中禁用继承？

Posted 2023-03-07

【中文标题】如何在顺风中禁用继承？

【英文标题】：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"  />
    </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 中禁用继承

【参考方案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>