Angular Flex Layout迁移Tailwind：断点条件显示问题求助

要实现不同屏幕断点下根据索引控制显示条目数量，你可以结合Angular的条件绑定或者CSS响应式选择器衔接TailwindCSS，以下是两种可行方案：

方案一：Angular条件类绑定（灵活适配动态逻辑） #

直接通过ngClass根据当前索引和断点条件，给元素添加Tailwind的响应式隐藏/显示类，完全对应原Flex Layout的逻辑：

<div 
  class="flex justify-center items-center border-left"
  *ngFor="let moneda of tipoCambio; let i=index"
  [ngClass]="{
    // 索引>=12：全断点隐藏
    'hidden': i >= 12,
    // 索引7-11：仅xl断点显示，其余隐藏
    'hidden sm:hidden md:hidden lg:hidden xl:flex': i >=7 && i <12,
    // 索引5-6：lg/xl断点显示，其余隐藏
    'hidden sm:hidden md:hidden lg:flex xl:flex': i >=5 && i <7,
    // 索引3-4：md/lg/xl断点显示，其余隐藏
    'hidden sm:hidden md:flex lg:flex xl:flex': i >=3 && i <5,
    // 索引2：sm及以上断点显示，xs隐藏
    'hidden sm:flex md:flex lg:flex xl:flex': i ===2,
    // 索引0-1：全断点显示
    'flex': i <2
  }"
>
  <button mat-button class="flex-1">
    <span class="bold accent">{{moneda.codMonedaFuente | uppercase}}</span>&nbsp;
    <span class="flex-1 font-size-dynamic">{{moneda.valor | number:'1.2-2'}}</span>
  </button>
</div>

对应Tailwind与原Flex Layout的属性映射：

• fxLayout="row" → flex
• fxLayoutAlign="center center" → justify-center items-center
• fxFlex → flex-1

方案二：CSS响应式选择器（代码更简洁） #

利用CSS的nth-child选择器结合Tailwind的断点媒体查询，一次性控制所有条目显示逻辑：

1. 在组件CSS文件中添加自定义工具类：

@layer utilities {
  .hide-over {
    @apply flex; /* 默认flex布局显示 */
  }

  /* xs断点：隐藏第3项及以后（对应索引>=2） */
  @media (max-width: 639px) {
    .hide-over:nth-child(n+3) {
      display: none;
    }
  }

  /* sm断点：隐藏第4项及以后（对应索引>=3） */
  @media (min-width: 640px) and (max-width: 767px) {
    .hide-over:nth-child(n+4) {
      display: none;
    }
  }

  /* md断点：隐藏第6项及以后（对应索引>=5） */
  @media (min-width: 768px) and (max-width: 1023px) {
    .hide-over:nth-child(n+6) {
      display: none;
    }
  }

  /* lg断点：隐藏第8项及以后（对应索引>=7） */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .hide-over:nth-child(n+8) {
      display: none;
    }
  }

  /* xl断点：隐藏第13项及以后（对应索引>=12） */
  @media (min-width: 1280px) {
    .hide-over:nth-child(n+13) {
      display: none;
    }
  }
}

2. 模板中直接使用该类：

<div 
  class="flex justify-center items-center border-left hide-over"
  *ngFor="let moneda of tipoCambio"
>
  <button mat-button class="flex-1">
    <span class="bold accent">{{moneda.codMonedaFuente | uppercase}}</span>&nbsp;
    <span class="flex-1 font-size-dynamic">{{moneda.valor | number:'1.2-2'}}</span>
  </button>
</div>

对齐原Flex Layout断点（可选） #

如果需要完全匹配Angular Flex Layout的默认断点（xs<600px、sm600-960px等），可以修改tailwind.config.js自定义断点：

module.exports = {
  theme: {
    screens: {
      'xs': {'max': '599px'},
      'sm': {'min': '600px', 'max': '959px'},
      'md': {'min': '960px', 'max': '1279px'},
      'lg': {'min': '1280px', 'max': '1919px'},
      'xl': {'min': '1920px'},
    },
  },
}

之后CSS中的媒体查询可以替换为Tailwind的@screen指令，写法更简洁：

@layer utilities {
  .hide-over {
    @apply flex;
  }

  @screen xs {
    .hide-over:nth-child(n+3) { display: none; }
  }

  @screen sm {
    .hide-over:nth-child(n+4) { display: none; }
  }

  @screen md {
    .hide-over:nth-child(n+6) { display: none; }
  }

  @screen lg {
    .hide-over:nth-child(n+8) { display: none; }
  }

  @screen xl {
    .hide-over:nth-child(n+13) { display: none; }
  }
}

内容的提问来源于stack exchange，提问作者Gerardo Buenrostro González