Chrome中可拖拽元素无法正确应用border radius问题求助

这不是Tailwind CSS的问题，是Chrome浏览器处理拖拽元素时的渲染bug，和Tailwind的样式配置完全无关。

几个可行的修复方案： #

• 给拖拽元素添加outline: none，覆盖Chrome默认的拖拽高亮样式：
  用Tailwind的话直接加类 outline-none 就行，或者自定义CSS：

  .draggable {
    outline: none;
  }
  

• 禁用Chrome默认拖拽反馈，自己用JS控制拖拽时的视觉状态：
  比如拖拽开始时加个半透明效果，结束时恢复：

  const draggableEl = document.querySelector('.draggable');
  draggableEl.addEventListener('dragstart', (e) => {
    e.target.classList.add('opacity-90');
  });
  draggableEl.addEventListener('dragend', (e) => {
    e.target.classList.remove('opacity-90');
  });
  

• 给元素加-webkit-backface-visibility: hidden，强制Chrome用硬件加速渲染，避免圆角白边：
  可以写自定义CSS或者扩展Tailwind工具类：

  .draggable {
    -webkit-backface-visibility: hidden;
  }
  

这个bug只存在于Chrome及Chromium内核的浏览器中，Firefox的拖拽渲染逻辑不一样，所以不会出现这个问题。

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