DᴀʀᴛʜVᴀᴅᴇʀ's questions

在 Tailwind CSS 版本 3.4.1 中尝试构建时间线，我想知道当我的辅助图标无法正确显示在线上时，我做错了什么。

代码：

import { ClipboardCheck, MessageSquare, Wrench, Car } from "lucide-react";

export default function TimelineExperiement() {
  const timeline = [
    {
      icon: <MessageSquare className="h-10 w-10 text-red-600" />,
      title: "Monday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <ClipboardCheck className="h-10 w-10 text-red-600" />,
      title: "Tuesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <Wrench className="h-10 w-10 text-red-600" />,
      title: "Wednesday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
    {
      icon: <Car className="h-10 w-10 text-red-600" />,
      title: "Thursday",
      description:
        "Bacon ipsum dolor amet shankle bresaola venison corned beef frankfurter short ribs pastrami pancetta porchetta tri-tip sausage fatback pork loin rump.",
    },
  ];

  return (
    <section id="process" className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-800 mb-4">Timeline</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Landjaeger alcatra shankle, buffalo cupim kielbasa short ribs
            burgdoggen.
          </p>
        </div>

        <div className="relative">
          <div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-red-200 transform -translate-x-1/2" />
          <div className="space-y-12 relative">
            {timeline.map((tl, index) => (
              <div
                key={index}
                className="flex flex-col md:flex-row items-center"
              >
                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0
                      ? "md:pr-12 md:text-right"
                      : "md:order-2 md:pl-12 "
                  }`}
                >
                  <h3 className="text-xl font-bold text-gray-800 mb-2">
                    {tl.title}
                  </h3>
                  <p className="text-gray-600">{tl.description}</p>
                </div>

                <div
                  className={`my-4 md:my-0 z-10 bg-white rounded-full p-4 shadow-md`}
                >
                  {tl.icon}
                </div>

                <div
                  className={`md:w-1/2 ${
                    index % 2 === 0 ? "md:order-2" : "md:text-right"
                  }`}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

我怎样才能让偶数项上的图标超出实线？

使用 TailwindCSS 玩转网格 我尝试将所有孤立元素居中，将其md设置为 2 列，而不是lg3 列。阅读后：

• 在 Tailwind 中将元素置于网格布局的中心
• 中心

我以为我的代码可以工作：

const DUMMY_TESTIMONIAL = [
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
  {
    body: 'Laborum quis quam. Dolorum et ut quod quia. Voluptas numquam delectus nihil. Aut enim doloremque et ipsam.',
    author: {
      name: 'Leslie Alexander',
      handle: 'lesliealexander',
      imageUrl:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
    },
  },
]

<Fragment>
  <div className="mx-auto max-w-screen-xl px-6">
    {/* stripped code */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 place-items-center bg-yellow-200 ">
      {DUMMY_TESTIMONIAL.map(testimonial => (
        <div key={testimonial?.author?.handle} className="col-span-1">
          <figure className="rounded-2xl bg-gray-50 p-6 text-sm leading-6">
            <blockquote className="text-gray-900">
              <p>{`“${testimonial?.body}”`}</p>
            </blockquote>
            <figcaption className="mt-6 flex items-center gap-x-4">
              <div className="relative w-10 h-10 bg-gray-100 rounded-full">
                <svg
                  className="absolute w-12 h-12 text-gray-400 -left-1"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                    clipRule="evenodd"
                  ></path>
                </svg>
              </div>
              <div>
                <div className="font-semibold text-gray-900">{testimonial?.author?.name}</div>
                <div className="text-gray-600">{`@${testimonial?.author?.handle}`}</div>
              </div>
            </figcaption>
          </figure>
        </div>
      ))}
    </div>
  </div>
</Fragment>

研究

• 如何使用 Tailwind CSS 将项目置于网格最后一行的中心？[重复]
• 如何将元素置于 CSS Grid 的最后一行中央？
• Tailwind CSS 的基础：网格项的中心对齐？
• 如何将元素置于 CSS Grid 的最后一行中央？
• item-center 在 tailwindcss 和 NextJS 中不起作用

我误解了什么place-items-center？

在 CSS 中我可以使用以下方法在悬停时展开：

a {
  --border-color: green;
  --border-width: 5px;
  --bottom-distance: 0px;
  
text-decoration:none;
background-position: 50% calc(100% - var(--bottom-distance));
  color: #666;
  display: inline-block;
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.3s;
  margin: 5px 0;
}

a:hover {
  background-size: 100% var(--border-width);
}

<a href="#">Expand from center</h1><br/>

我一直在阅读以下文档：

• 变换原点
• 过渡属性
• 动画片
• 规模

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<a href="#" class="group text-sm">
Expand from center
<span class="block mt-4 max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-green-600"></span>
</a>

如何在 Tailwind CSS 中将鼠标悬停在中心时展开？

学习 Tailwind CSS 试图找出将 SVG 图标移动到按钮右上角的正确方法是什么？这与 Github 上的通知行为类似，查看他们的代码时，他们正在使用:before。应用top-0并将inset-y-0移动div到布局顶部。

研究

• 顶部 / 右侧 / 底部 / 左侧|放置定位元素

试图

BtnIcon 组件：

import React, {FC, ElementType, ReactNode} from 'react'

interface Props {
  label: string
  Icon: ElementType
  children: ReactNode
}

const IconBtn: FC<Props> = ({label, Icon, children}) => {
  return (
    <button
      type="button"
      aria-label={label}
      className="group flex items-center p-2 hover:bg-secondary-50 transition-colors rounded-md cursor-pointer"
    >
      <Icon className="h-6 w-6 flex-shrink-0 text-secondary-500 group-hover:text-secondary-800" />
      {children}
    </button>
  )
}

export default IconBtn

孩子：

<Link href="/">
  <div className="flex justify-center items-center">
    <IconBtn label="foo" Icon={NotificationIcon}>
      <span className="sr-only">notification</span>
      <div className="relative">
        <div
          aria-labelledby="notification-tooltip"
          className="absolute top-0 right-0 w-2 h-2 bg-red-700 rounded-full"
        ></div>
      </div>
    </IconBtn>
  </div>
</Link>

我有一个对象数组，如下所示：

const arr = [
    {
        "name": "Day",
        "value": "Monday"
    },
    {
        "name": "Month",
        "value": "November"
    },
    {
        "name": "Day",
        "value": "Monday"
    },
    {
        "name": "Month",
        "value": "December"
    },
    {
        "name": "Day",
        "value": "Friday"
    },
    {
        "name": "Month",
        "value": "November"
    },
    {
        "name": "Day",
        "value": "Friday"
    },
    {
        "name": "Month",
        "value": "December"
    }
]

但我需要将对象数组修改为：

const final = [
    {
        "name": "Day",
        "values": [
            "Monday",
            "Friday"
        ]
    },
    {
        "name": "Month",
        "values": [
            "November",
            "December"
        ]
    }
]

我可以用以下方法过滤掉重复项：

const filtered = arr.filter(
    (v, i, a) =>
      a.findIndex(v2 => v?.name === v2?.name && v?.value === v2?.value) === i
  );

但我坚持在没有Lodash或下划线的情况下以有效的方式执行此操作的方法，并且我尝试使用Object.assign()但我的实现不起作用：

const test = filtered.map(({ name, value }) =>
    Object.assign({ name, value: [] }, (name, value))
  );
console.log(test)

我想我以前见过这个问题并测试过以下答案：

• 如何将数组与值为数组的对象合并
• 如何按键合并两个对象数组并在单个对象数组中保留唯一键？
• 从 Object 数组中，获取仅匹配键值的数组
• 从对象数组中，提取属性值作为数组
• 将同一数组内的多个对象合并为一个对象[重复]

在对象数组中，我可以组合具有相同名称但在字符串数组中具有值的对象吗？