如何使用 tailwind css 将阴影颜色应用于英雄图标？

Question

我在 React 项目中使用 Tailwind v3 和英雄图标。

import { PlusCircleIcon } from '@heroicons/react/solid';
import { FunctionComponent } from 'react';

interface HeaderProps {
  title: string;
}

export const Header: FunctionComponent<HeaderProps> = ({ title }) => {
  return (
    <nav className="flex justify-between items-center">
      <h1 className="text-white text-7xl font-bold pt-2">{title}</h1>
      <PlusCircleIcon className="h-14 w-14 text-accent  shadow-sm shadow-white" />
    </nav>
  );
};

如何在圆周围应用阴影颜色？

Answer 1

你可以这样使用 drop-shadow 属性:

<PlusCircleIcon className="h-14 w-14 drop-shadow-lg" />

您可以使用其他阴影大小（例如 md、lg、xl、2xl）。 class 的问题是您无法更改颜色，因此您需要使用自定义 class 名称，如下所示：

<PlusCircleIcon className="h-14 w-14 drop-shadow-[0_5px_5px_rgba(255,0,0,1)]" />

这样你就可以改变阴影的颜色和大小而无需编写自定义 CSS。

如何使用 tailwind css 将阴影颜色应用于英雄图标？

How to apply shadow color to hero-icons with tailwind css?

javascript

reactjs

tailwind-css