Tailwind CSS响应式问题：md:rounded-br-md类无法生效如何修复？

问题原因 #

你的按钮默认添加了rounded-b-md类，这个类会同时设置底部左、右两个角为md尺寸的圆角。在MD分辨率下，这个全局生效的类会保留按钮左下角的圆角，不仅和你添加的md:rounded-br-md逻辑冲突，还会导致布局中按钮与左侧日期输入框的连接处出现多余圆角，破坏预期样式。

解决方案 #

修改按钮的类，在MD断点下取消左下角的圆角，确保只有右下角保留圆角：

<div class="container mx-auto p-1">
  <div class="mt-4 grid md:grid-cols-3 lg:grid-cols-6">
    <input type="text" name="" class="col-span-3 rounded-t-md border-2 bg-gray-100 p-1 text-lg outline-none" placeholder="Digite aqui" id="" />
    <input type="date" name="" class="col-span-3 border-2 bg-gray-100 p-1 text-lg outline-none md:col-span-1 md:rounded-bl-md" id="" />
    <input type="button" class="col-span-3 rounded-b-md border-2 bg-gray-100 p-1 text-lg hover:bg-slate-300 active:bg-slate-400 md:col-span-2 md:rounded-bl-none md:rounded-br-md" value="Adicionar" />
  </div>
</div>

或者采用更清晰的写法，先在MD断点下重置底部圆角，再单独指定右下角：

<input type="button" class="col-span-3 rounded-b-md border-2 bg-gray-100 p-1 text-lg hover:bg-slate-300 active:bg-slate-400 md:col-span-2 md:rounded-b-none md:rounded-br-md" value="Adicionar" />

原理说明 #

Tailwind的响应式类（如md:前缀）优先级高于无前缀的基础类。通过添加md:rounded-bl-none，可以在MD分辨率下覆盖默认rounded-b-md带来的左下角圆角；而md:rounded-br-md会确保右下角保留预期的圆角样式。两种写法都能解决布局异常问题，后者的逻辑更直观，适合后续维护。

内容的提问来源于stack exchange，提问作者Allan Araújo