Tailwind教程

安装:

pnpm dlx jsrepo@latest add https://reactbits.dev/r/InfiniteMenu-TS-TW

配置:

• 需要在文件的开头标识”use client”;
• 全屏固定定位：

<div className='relative w-full min-h-dvh h-dvh h-screen '>

• 垂直居中：

absolute
font-black
[font-size:4rem]
left-1/2
top-1/2
transform
-translate-y-1/2
-translate-x-1/2

导入StarBorder组件:

<StarBorder
	as='button'
	className=' text-4xl'
	color='red'
	thickness='1'
	speed='3s'>
	<span className='text-3xl  text-white'>
		&nbsp; ✨ 点击跳转 &nbsp;&nbsp;
	</span>
</StarBorder>

使用:

<div className='absolute w-full min-h-dvh h-dvh h-screen opacity-50'>
	<InfiniteMenu items={navs} scale={0.3} />
</div>