如何使Tailwind @layer组件响应？

Question

如何在div中指定Tailwind @layer组件类的桌面版本？以下似乎不起作用，它显示移动版本独立于Chrome的断点：

    <button type="button" class="my-button md:my-button-desktop">Click here
    </button>

main.scss如下：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .my-button {
    font-size: 1rem;
    font-weight: 100;
    line-height: 130%;
    color: theme("colors.white");
    background-color: theme("colors.btnDefault");
    border:solid;
    border-color: theme("colors.primaryColor100");
    border-width: 0.1rem;
    padding-top: 0.5rem;
    border-radius: 6px;
    padding-bottom: 1.5rem;
    text-align: center;
  }
.my-button-desktop {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 150%;
    color: theme("colors.white");
    background-color: theme("colors.btnDefault");
    border:solid;
    border-color: theme("colors.primaryColor100");
    border-width: 0.2rem;
    padding-top: 0.7rem;
    border-radius: 8px;
    padding-bottom: 2.5rem;
    text-align: left;
  }

Answer 1

您可以在您的main.scss中使用默认的CSS @media规则，所以只需在最小宽度时修改它以更改..my按钮类：

@layer components {
  .my-button {
    font-size: 1rem;
    font-weight: 100;
    line-height: 130%;
    color: theme("colors.white");
    background-color: theme("colors.btnDefault");
    border: solid;
    border-color: theme("colors.primaryColor100");
    border-width: 0.1rem;
    padding-top: 0.5rem;
    border-radius: 6px;
    padding-bottom: 1.5rem;
    text-align: center;
  }

  @media (min-width: 768px) {
    .my-button {
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 150%;
      color: theme("colors.white");
      background-color: theme("colors.btnDefault");
      border: solid;
      border-color: theme("colors.primaryColor100");
      border-width: 0.2rem;
      padding-top: 0.7rem;
      border-radius: 8px;
      padding-bottom: 2.5rem;
      text-align: left;
    }
  }
}

然后，您所要做的就是从按钮标记中删除md:my-button-desktop。