如何使用 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。