Tailwind教程

安装:

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

配置:

• 由于组件使用了动画，需要全局globall.css中配置

//globall.css
@keyframes star-movement-bottom {
   0% {
     transform: translate(0%, 0%);
     opacity: 1;
   }
   100% {
     transform: translate(-100%, 0%);
     opacity: 0;
   }
 }
 @keyframes star-movement-top {
   0% {
     transform: translate(0%, 0%);
     opacity: 1;
   }
   100% {
     transform: translate(100%, 0%);
     opacity: 0;
   }
 }
 @theme inline {
   --animate-star-movement-bottom: star-movement-bottom linear infinite alternate;
   --animate-star-movement-top: star-movement-top linear infinite alternate;
 }

使用:

• 在InfiniteMenu组件中使用