0
182
Views¿Cómo aplicar el color de la sombra a los iconos de los héroes con Tailwind CSS?
Estoy usando Tailwind v3 e íconos de héroe en un proyecto de reacción.
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> ); }; 
¿Cómo aplico color de sombra alrededor del círculo?
·
Juan Pablo Isaza
1 answers
Answer question0
Puede usar la propiedad drop-shadow paralela como esa:
<PlusCircleIcon className="h-14 w-14 drop-shadow-lg" />puede usar otro tamaño de sombra (por ejemplo, md, lg, xl, 2xl). el problema con la clase es que no puede cambiar el color, por lo que debe usar un nombre de clase personalizado como este:
<PlusCircleIcon className="h-14 w-14 drop-shadow-[0_5px_5px_rgba(255,0,0,1)]" />de esta forma puedes cambiar el color y el tamaño de la sombra sin tener que escribir CSS personalizado.
·
Juan Pablo Isaza
Report
Answer question