[Next.js + tailwind] tailwind public 폴더에서 버튼 backgroundImage 설정하기

src 폴더 하위가 아닌 바깥쪽 public 폴더에서 정적 이미지를 가져와 백그라운드 이미지로 사용하는 경우 설정이 조금 더 필요하다

 

1) public 폴더 생성 후 이미지 넣기

2) tailwind.config.ts에서 extend에 backgroundImage 추가

backgroundImage: {
  buttonBG: "url('/assets/images/button/buttonBg.svg')",
},

 

3) 버튼에서 사용하기!

<button
  className={`bg-buttonBG bg-no-repeat bg-cover bg-center text-white font-bold ${className}`}
  onClick={onClick}
  type={type}
>
  {children}
</button>

tailwind.config.ts에서 설정한 이름으로 background 설정을 해주면 끝!

나머지 설정들은 이 버튼에 필요해서 넣은거지 필수가 아니다!