如何删除：活动状态下的多余边框？顺风

Posted 2023-03-07

【中文标题】如何删除：活动状态下的多余边框？顺风

【英文标题】：How to remove excess border in :active state? tailwindcss

【发布时间】：2021-06-19 08:46:31

【问题描述】：

我目前在使用 tailwindcss 时遇到了一个奇怪的问题。下面的按钮看起来不错。

但是当我点击它时，它的形状是药丸/圆形，而不是下面的一个矩形。

有人知道如何使活动状态形状与当前形状相同吗？

---

这是我的按钮代码：

<button class="flex items-center justify-center focus:outline-none rounded-3xl 
bg-green-200 text-gray-800 text-13 h-8 px-3">
  Goto Button
</button>

我尝试添加以下代码。但是不行

active:rounded-3xl

设备测试：iPhone X（使用 chrome 浏览器 (CTRL+SHFT+M)）

【问题讨论】：

从屏幕截图中，按钮看起来更像是在沿文本拖动光标时突出显示。

@NathanDawson 当我按住点击时它会突出显示。我想我没有拖

我将您的代码放入 Tailwind Play (play.tailwindcss.com)，但无法复制。

@NathanDawson 如果我按住单击按钮，则会出现蓝色矩形。使用 chrome 设备 - iPhone X (CTRL+SHFT+M)。我正在使用 Windows 10

【参考方案1】：

两种可能的解决方案

1) 这可以通过禁用preflight of tailwind 来解决，但不幸的是，它可能会导致可能受影响的页面出现重大设计问题。

corePlugins: 
    preflight: false,

2) 或者，这可以通过更改光标样式来解决。将此类添加到按钮cursor-auto。

<button class="cursor-auto flex items-center justify-center focus:outline-none rounded-3xl 
bg-green-200 text-gray-800 text-13 h-8 px-3">
  Goto Button
</button>

【参考方案2】：

默认情况下，大多数插件都没有启用active 变体。

您需要在tailwind.config.js 中添加一个小的配置更改

扩展borderRadius 插件

//Add this change in tailwind.config.js
module.exports = 
  variants: 
    extend: 
      borderRadius: ['active'],
    
  

注意： 默认情况下，插件只启用了一些变体，如focus、hover 等（仅限核心插件）

有关详细信息，请参阅 https://tailwindcss.com/docs/hover-focus-and-other-states

对于边界半径， https://tailwindcss.com/docs/border-radius

【讨论】：

在标记答案之前已经尝试过这个。但它不起作用。也许你也可以在 tailwindcss-playground play.tailwindcss.com

中测试它