需求：左滑一下选择项出现一个删除按钮
其实就是将图片中的信息区间和按钮区间放在一个div盒子下，然后将父元素的div进行定位，信息区和操作区也想对定位到0和-5rem的位置，给div设置一个data-set表示是否正在进行展开/收起的过程，使用touchEnd/touchStart方法来执行记录，通过tailwind的添加类名的方式便捷的做出处理：
代码:

// footerSingleInfo.tsx
import React from 'react'
import DustBoxIcon from '@/components/atoms/icon/DustBoxIcon'

interface FooterSingleInfoProps {
  // TODO unknown name
  title: string
  subTitle: string
  price: number
  onClick: () => void
  // TODO maybe we can set a object(Array) to store the operate icons, next version..
}

const FooterSingleInfo: React.FC<FooterSingleInfoProps> = ({
  title,
  subTitle,
  price,
  onClick,
}) => {
  let touchStart = 0
  let touchEnd = 0

  const touchEndEvent = (e: React.TouchEvent<HTMLDivElement>) => {
    let currentEle = e.currentTarget
    touchEnd = e.changedTouches[0].clientX
    // touch to left
    if (currentEle.dataset.status === '0' && touchEnd - touchStart < -30) {
      currentEle.dataset.status = '1'
      currentEle.classList.add('left-[-5rem]')
    }
    // touch to right
    if (currentEle.dataset.status === '1' && touchEnd - touchStart > 30) {
      currentEle.dataset.status = '0'
      currentEle.classList.remove('left-[-5rem]')
    }
  }

  const lineBaseStyles =
    'overflow-hidden relative h-20 border-b border-blue-gray-02 border-solid'

  const infoStyles =
    'flex absolute left-0 z-10 justify-between items-center p-3  w-full h-20 bg-white transition-all'

  const delButtonStyles =
    'flex absolute right-[-5rem] z-0 justify-center items-center w-20 h-20 bg-[rgb(242,69,28)]'

  return (
    <div className={lineBaseStyles}>
      <div
        data-status={0}
        onTouchStart={(e) => {
          touchStart = e.touches[0].clientX
        }}
        onTouchEnd={touchEndEvent}
        className={infoStyles}
      >
        <div className="flex flex-col">
          <span className="font-bold text-black">{title}</span>
          <span className="text-base text-neutral-05">{subTitle}</span>
        </div>
        <div>{price.toFixed(2)}</div>
        <div className={delButtonStyles} onClick={onClick}>
          <DustBoxIcon className="w-[2rem] h-[2rem] text-white" />
        </div>
      </div>
    </div>
  )
}

export default FooterSingleInfo

以此记录，第一次使用tailwind CSS，还是有很多值得琢磨的地方