cursor-autocursor: auto; cursor-defaultcursor: default; cursor-pointercursor: pointer; cursor-waitcursor: wait; cursor-textcursor: text; cursor-movecursor: move; cursor-helpcursor: help; cursor-not-allowedcursor
shadow-none">Disabled Click Click 我留下一个例子https://play.tailwindcss.com/RBb3RtRB4B - victoryoalli 0 我个人通过这样做达到了:
class="bg-gray-300 text-gray-500 px-4 py-2 rounded cursor-not-allowed" disabled > 禁用按钮 尝试一下 » 动画实现Tailwind 提供了强大的动画工具,无需编写 CSS 关键帧即可实现常见动画效果。1. 过渡动画 (Transition)实例 尝试一下 » 关键类:transition-all:指定哪些属性需要过渡 duration-300:动...
type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed" disabled > <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24"><!-- 加载图标 SVG --></svg> 提交中... 最佳实践 表单布局 用户名 <!-- 更多表单字段...
cursor-wait cursor: wait; cursor-text cursor: text; cursor-move cursor: move; cursor-help cursor: help; cursor-not-allowed cursor: not-allowed; cursor-none cursor: none; cursor-context-menu cursor: context-menu; cursor-progress cursor: progress; cursor-cell cursor: cell; cursor-crosshair curs...
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0...
opacity-50: 设置元素的透明度为 50%。 cursor-not-allowed: 设置鼠标悬停在元素上时的光标为禁止符号。 disabled: 禁用按钮,使其不可点击。这个示例展示了如何使用 Tailwind CSS 来创建具有不同交互状态的按钮。你可以根据需要调整颜色、边框、透明度等样式。第...
? "pointer-events-none opacity-60 hover:cursor-not-allowed" : "" }border border-white/60 min-h-[120px] max-h-[240px] rounded-xl flex p-[15px] mt-4`} > <textarea className="m-0 resize-none box-border flex-1 h-full bg-transparent overflow-y-auto focus:ring-0 focus-visible...
cursor-not-allowedcursor: not-allowed;禁止 pointer-events-nonepointer-events: none;阻止浏览器事件 select-noneuser-select: none;禁止选中 注:用 text 千万要注意line-height,虽然很想吐槽 明明是 font-size ,但整个 text 很异类. 如果只想使用 font-size 的话,直接text-[14px]这样就好了 ...
className={`${classNames(isLoading)?"pointer-events-none opacity-60 hover:cursor-not-allowed":""}border border-white/60 min-h-[120px] max-h-[240px] rounded-xl flex p-[15px] mt-4`}><textarea className="m-0 resize-none box-border flex-1 h-full bg-transparent overflow-y-auto...