如何在React中使用Tailwind CSS移除按钮的涟漪效果？

完全可以通过@layer方式移除涟漪效果，具体实现步骤如下：

1. 定位涟漪效果的来源 #

基于Tailwind的按钮涟漪通常是通过自定义伪元素（如::after）或全局按钮样式实现的。先确认项目中是否存在类似以下的全局样式：

button::after {
  content: '';
  position: absolute;
  /* 涟漪相关的过渡、缩放样式 */
  transition: transform 0.5s ease;
}

2. 用@layer编写覆盖样式 #

在你的Tailwind入口CSS文件（如tailwind.css）中，添加自定义工具类：

@layer utilities {
  .no-ripple {
    position: relative;
    overflow: hidden;
  }
  .no-ripple::after {
    display: none !important;
  }
}

如果涟漪是在active/focus状态下触发的，可扩展覆盖规则：

@layer utilities {
  .no-ripple {
    position: relative;
    overflow: hidden;
  }
  .no-ripple::after,
  .no-ripple:active::after,
  .no-ripple:focus::after {
    display: none !important;
  }
}

3. 给按钮添加自定义类 #

修改你的按钮代码，引入no-ripple类：

<button className="no-ripple uppercase tracking-[0.4em] text-[color:hsl(36,100%,99%)] py-4 px-10 bg-[color:hsl(5,85%,63%)] mt-8 mb-0 rounded text-base">
  {children}
</button>

补充：禁用浏览器默认高亮 #

如果涟漪效果实际是浏览器自带的焦点/点击光晕，直接用Tailwind内置类即可禁用：

<button className="... focus:outline-none focus:ring-0">
  {children}
</button>

内容的提问来源于stack exchange，提问作者user