如何让Tailwind按钮在页面加载时处于focus状态？

Tailwind文档里提到的default:修饰器确实只针对复选框、单选按钮这类表单控件，不过要让按钮在页面加载时就处于focus状态，有两种简单的实现方式：

• HTML原生属性实现：直接给按钮添加autofocus原生属性，这是最简便的方案，不需要额外的样式或脚本：

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-400 text-white px-4 py-2 rounded" autofocus>初始聚焦按钮</button>

• JavaScript动态控制：如果需要更灵活的触发时机（比如等待其他资源加载完成后再聚焦），可以用JS在页面加载完成后主动调用按钮的focus()方法，同时配合Tailwind的focus:前缀定义聚焦样式：

<button id="initFocusBtn" class="bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 focus:outline-none text-white px-4 py-2 rounded">JS控制聚焦按钮</button>
<script>
  window.addEventListener('load', () => {
    document.getElementById('initFocusBtn').focus();
  });
</script>

注意：不管用哪种方式，都可以通过Tailwind的focus:类自定义按钮聚焦时的样式，比如调整背景色、添加外边框等，完全适配按钮控件的需求。

内容的提问来源于stack exchange，提问作者Danie Otto