0
185
VistasHow to apply shadow color to hero-icons with tailwind css?
I am using Tailwind v3 and hero icons in a react project.
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>
);
};
How do I apply shadow color around the circle?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You can use drop-shadow property like that:
<PlusCircleIcon className="h-14 w-14 drop-shadow-lg" />
you can use another shadow size (e.g. md, lg, xl, 2xl). the problem with with class is that you can't change the color so that, you need to use a custom class name like this:
<PlusCircleIcon className="h-14 w-14 drop-shadow-[0_5px_5px_rgba(255,0,0,1)]" />
this way you can change the color and the size of the shadow without having to write custom CSS.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta