跳到主要内容

代码片段

彩虹边框按钮​

@see https://play.tailwindcss.com/VHSlg0Uqcd

Tailwind 3.x 版本

<div class="flex h-40 flex-col items-center justify-center bg-black">
  <button class="relative overflow-hidden rounded-lg px-20 py-6">
    <span class="absolute inset-px z-10 flex items-center justify-center rounded-lg bg-black bg-gradient-to-t from-neutral-800 text-neutral-300">Button</span>
    <span aria-hidden class="absolute inset-0 z-0 scale-x-[2.0] blur before:absolute before:inset-0 before:top-1/2 before:aspect-square before:animate-disco before:bg-gradient-conic before:from-purple-700 before:via-red-500 before:to-amber-400" />
  </button>
</div>

Tailwind 4.x 版本

<div class="flex h-40 flex-col items-center justify-center bg-black">
  <button class="relative overflow-hidden rounded-lg px-20 py-6">
    <span class="absolute inset-px z-10 flex items-center justify-center rounded-lg bg-black bg-[linear-gradient(to_top,#1f1f1f,#000000)] text-neutral-300">Button</span>
    <span aria-hidden class="absolute inset-0 z-0 scale-x-[2.0] blur before:absolute before:inset-0 before:top-1/2 before:aspect-square before:animate-[spin_5s_linear_infinite] before:bg-[conic-gradient(from_0deg,#6b21a8,#ef4444,#f59e0b)]" />
  </button>
</div>

区别是： Tailwind CSS 4.x 去掉了 bg-gradient-conic 等预定义渐变类，改用任意值语法 [...] 来直接指定 CSS 属性。