[CSS/Next] tailwind drop-shadow 태그에 그림자 넣기

 

 

💡 tailwind 로 그림자 효과를 넣어보자!

 

<Link
  href={member.github}
  className="px-4 py-2 bg-subColor2 rounded-xl hover:drop-shadow"
  target="_blank"
>
  github
</Link>

 

링크에 호버하면 그림자를 주고싶었다!

 

tailwind 에 설정되어 있는 그림자값

보이시는가.. 은은한 그림자..

 

🎀 디자인을 바꾸고 싶다면 tailwind.config.ts 에서 설정할 수 있다.

theme: {
    extend: {
      dropShadow: {
        DEFAULT: '2px 2px 0 #890105',
      },
    },
  },

짠..

 

DEFAULT 말고도 md, 3xl 등 사이즈 별로 추가할 수 있다!

 

 

 

🔗 https://tailwindcss.com/docs/drop-shadow

Drop Shadow - Tailwind CSS