为啥 tailwind css 在 iPhone ios 设备上不起作用？

Posted 2023-03-07

【中文标题】为啥 tailwind css 在 iPhone ios 设备上不起作用？

【英文标题】：why tailwind css don't work on iPhone ios devices?为什么 tailwind css 在 iPhone ios 设备上不起作用？

【发布时间】：2021-12-19 23:49:48

【问题描述】：

请帮帮我，我想在我的按钮上加一个环，它可以在windows浏览器上正常工作，但不能在iphone/ios设备上工作，那么我可以为ios设备做什么？

这是我的代码：

<button class=" rounded-lg appearance-none bg-gray-500 focus:ring-8 focus:ring-gray-500 ring-offset-4 py-2 m-12 ml-12 w-64 ">ring</button>

我在网上写了一个demo，你可以在网站上查看我的代码： https://codepen.io/jesson_king/pen/GRvxjoQ

当我点击按钮时，我想看到一个包围按钮的环，仍然无法在 safari/ios 上运行，但 windows chrome 运行正常

我希望当我点击按钮时，有一个环围住按钮，如下图： https://pbs.twimg.com/media/FDg0hpNUYAYo8JK?format=png&name=small

【问题讨论】：

您确定您在问题中提供的代码适用于非 IOS 设备吗？它不适合我（在 Windows 10 Edge 上）使用@GS_ZS 提供的系统（即没有环类）。

我认为问题可能与元素是按钮有关。也许焦点在按钮上可能意味着什么尚无定论，因为它通常的工作是将您带到其他地方或以其他方式在单击时执行某些操作，而不是保持专注。如果按钮被替换为内容可编辑的 div，它会在 iOS 上获得焦点，但会一直保持直到焦点移动到其他地方。

呃，我喜欢这个戒指，我想在我的手机网站上使用它，但是tailwindcss的作者告诉我这是无法解决的问题，所以我放弃了戒指，并尝试了另一种风格与我的网站.. 在这里检查：github.com/tailwindlabs/tailwindcss/discussions/5998

【参考方案1】：

您似乎缺少ring 类名，这是添加环类名后在线示例的链接 enter link description here

【讨论】：

还是不行，我在网上写了个demo，你可以查看我的代码：codepen.io/jesson_king/pen/GRvxjoQ

我的意思是，仍然不能在 safari/ios 上工作，windows chrome 还可以

它在我的 ios/safari 上运行良好：我的配置如下。软件版本：14.6 机型名称：iPhone 7

这是我的iphon7上运行的截图链接：ibb.co/0JDRVQd

你好？我问了tailwindcss的作者这个问题，他回答我，是tailwindcss的问题，这个问题现在解决不了，可惜了，查看链接：github.com/tailwindlabs/tailwindcss/discussions/5998