<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"> 产品 </a> <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex...
<button class="m-4 px-8 py-4 text-white bg-blue-200 rounded hover:bg-blue-700 transition-colors duration-700 ease-in delay-100">Click</button> 变换 scale(-[axis])-[magnification]:缩放,axis 表示参照轴,取值为 x 或 y;magnification 表示缩放倍率,为 number% rotate-[degree]:旋转,degree 表...
Just In Time 版本也已经长成了All In Time，支持更多的 CSS 样式，更多的 className，我已经离不开它...
delay-{time}:指定过渡效果的延迟时间,时间单位可以是毫秒或秒。 这些过渡属性可以通过在 HTML 元素上添加相应的 utility class 来实现。 <button class="transition-all duration-300 ease-in-out hover:bg-blue-500">按钮</button> 复制 上面的例子中,当鼠标悬停在按钮上时,按钮会呈现一个持续时间为 300 毫秒...
<template><div><divtabindex="1"class="relative border border-gray-300 px-10 max-w-md mx-auto my-2 cursor-pointer rounded-lg px-5 py-4 rounded-lg border bg-white transition duration-150 ease-in-out placeholder:text-zinc-400 hover:bg-zinc-100 focus:border-transparent focus:outline-none ...
<button class="transition duration-normal hover:bg-gray-300">Hover me!</button> 这里的 duration-normal 实际上是等价于 duration-150 的。除了 duration-normal,还有 duration-fast(150ms)、duration-slow(300ms)等等。 需要注意的是,在进行过渡效果时,需要将 transition 类也添加到元素上。例如: <div cl...
*/ } .hover\:bg-brand-gradient:hover { /* ... */ } 如果您也想给您自己的功能类添加前缀,只需要把前缀添加到类定义中即可: @variants hover { .tw-bg-brand-gradient { /* ... */ } } Important important 选项允许您控制是否将 Tailwind 的功能类标记为 !important。当您将 Tailwind 与已存在...
-- 位移效果 --><divclass="transition-transform duration-300 ease-in-out hover:translate-x-4">位移效果</div><!-- 组合动画 --><divclass="transition-all duration-300 ease-in-out hover:scale-110 hover:rotate-12 hover:translate-y-2">组合动画</div>...
Support defining theme values using arrays wherever it makes sense (box-shadow, transition-property, etc.) (e13f083c4) Enable group-hover for color utilities by default (28985b6) Enable focus for z-index utilities by default (ae5b3d3) Changed New @apply implementation, slight backwards incomp...
class="transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ..."> Save changes</button><!-- Using `motion-safe` is less code in these situations --><button class="motion-safe:transition motion-safe:hover:-translate-x-0.5 ...">Save changes</...