<input type="text" class="border" /> <input type="text" class="border border-red-500" /> <input type="text" class="border border-green-500" /> 间隔颜色:divide-[direct] divide-[color]-[shade] divide-[direct]:添加分隔,direct 表示分隔方向,取值 x-横向、y-纵向 <div class="divide-y...
在使用 tailwindcss 时,用 focus:outline-none 这个class 实现隐藏 focus 状态时的边框,适用于 inpu button 等。昨天手动撸了一个系统,登录表单使用了这个样式,但是没有生效,input 处于focus 状态时还是会有边框,今天去 tailwindcss 官方仓库的 issue 看了一下,这个问题 19 年就有人提出来了,但是如今还是存在。
在 UWP 的 Flyout 的边框一点都不好看，本文告诉大家如何去掉这个边框 先写一个简单的界面，这个界面...
<input type="email" class="w-full py-2 px-3 border-2 border-gray-300 rounded focus:outline-none focus:border-blue-500" placeholder="email@example.com"> </div> <div class="mb-6"> <label class="block mb-2 text-sm font-bold text-gray-700">Password</label> <input type="password"...
@apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500; } </style> <!-- 使用组合类替代多个独立类 --> <div class="card-base"> <div class="p-6"> <input type="text" class="input-base"> ...
<input type="text" name="username" id="username" class="block w-full pr-10 border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="请输入用户名" required > <!-- 验证状态图标 --> <div class="absolute inset-y-0 right-0 pr-3 flex items-...
-- 深色模式切换按钮 --><buttonid="theme-toggle"class="rounded-lg p-2.5 text-gray-500 hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700"><!-- 亮色模式图标 --><svgclass="w-5 h-5 hidden ...
outline-nonefocus:ring-2focus:ring-blue-500focus:ring-offset-2;}.card-base{@applybg-whitedark:bg-gray-800 rounded-lg shadow-lg overflow-hidden;}.input-base{@applyblock w-full px-3 py-2 border border-gray-300 rounded-md shadow-smfocus:ring-indigo-500focus:border-indigo-500;}</style><...
Replace outline-none with outline-hidden, add new simplified outline-none utility (#14926) Revert adding borders by default to form inputs (#14929) Deprecate shadow-inner utility (#14933) Remove --leading-none from the default theme in favor of a static leading-none utility (#14934) 4.0.0...
<inputclass="focus:border-indigo-600focus:outline-hidden..."type="text"/> It is highly recommended to apply your own focus styling for accessibility when using this utility. Removing outlines Use theoutline-noneutility to completely remove the default browser outline on focused elements: ...