개발자

Next.js Image에 스타일 적용 방법

2022년 10월 19일조회 356

안녕하세요! Next.js Image 컴포넌트에 tailwindcss로 스타일을 씌우려고 하는데 스타일 적용 방법이 있는지 궁금합니다! Image 컴포넌트에 classname으로 적용이 안되는 것 같아서요 :)

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

손정현님의 프로필 사진

안녕하세요! 혹시 Next.js Image 컴포넌트가 `next/image`에서 가져온 것일까요? 그렇다면 Image의 className으로 tailwindcss를 적용하는것은 불가능한 것으로 알고 있습니다. 이유는 Next.js Image에 span이 붙어서 생성되기 때문입니다. 다만, so (https://stackoverflow.com/questions/64846858/how-to-use-tailwind-css-with-next-js-image) 글을 보시면 Image를 한번 묶어서 컨테이너에 tailwindcss를 추가할 수는 있을 것 같습니다. 또는 Next.js 12.1.1 버전을 사용 중이시면 so (https://stackoverflow.com/questions/70210003/how-to-remove-the-wrapper-spans-from-next-image-in-next-js) 참고하셔서 layoutRaw를 설정해주는 방법도 있습니다. 12.1.1 이상은 layoutRaw가 적용이 안되고 아예 새로운 모듈로 Image 컴포넌트가 새로 만들어져서 next/future/image 사용하시면 됩니다. (Next.js 12.3.0에서 stable 됐습니다)

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!