时间戳

首页 > 解决方案 > 如何删除：活动状态下的多余边框？顺风

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

问题描述

我目前在使用 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)）

标签： csstailwind-css

解决方案

两种可能的解决方案

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

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>

推荐阅读