tailwind에서 스크롤 바 어떻게 없애죠...?

안녕하세요 여러분 ㅎ...

제가 오늘 또 해냈습니다!

제가 프로젝트를 진행하면서 맵 위에 띄우는 카드를 tailwind로 스타일링 작업을 했잖아요?

스크롤이 생겨서 제가 원하는 디자인이 안나오더라구요 ㅠ

이걸 tailwind로는 어떻게 해결해야되나... 고민이 많았는데 또 구글을 찾아보니깐 또 이게 해결방법이 있드라구요!! ㅋㅋㅋ

그럼 그 해결 방법 알아보러 한 번 가보실까요?

먼저 TailWind CSS의 플러그인을 다운받아줍시다!

yarn add tailwind-scrollbar-hide

저는 yarn 패키지로 프로젝트를 생성했기 때문에 yarn add로 해당 코드를 터미널에 작성하여 설치를 해줍니다!

그 후

plugins: [require("tailwind-scrollbar-hide")] 추가해주기

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [
		"./app/**/*.{js,ts,jsx,tsx,mdx}",
		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
		"./components/**/*.{js,ts,jsx,tsx,mdx}",
		"./src/**/*.{js,ts,jsx,tsx,mdx}",
	],
	theme: {
		extend: {},
	},
	plugins: [require("tailwind-scrollbar-hide")],
};

tailwind-config.js 파일에 plugins을 찾아서 해당 코드처럼 코드를 수정해줍니다!

그렇게 해서 저는 이렇게 적용했습니다!

return (
		<>
			<div className="flex flex-col gap-[10px] my-[20px] h-full items-center overflow-scroll px-[20px] scrollbar-hide">
				{shops.map((shop: typeOfShop) => {
					return (
						<React.Fragment key={nanoid()}>
							<ShopCard2 shops={shops} shop={shop} />
						</React.Fragment>
					);
				})}
			</div>
		</>
	);

이렇게 스크롤바 없이 아주 깔끔한 화면을 만나볼 수 있습니다 ㅎ

네! 오늘은 이렇게 tailwind로 스크롤바를 없애는 작업을 진행해봤는데요

이럴 때 참 뿌듯한 것 같습니다 ㅎ

잘 안되다가도 이렇게 소소한거라도 해결이 되면 참 좋은 것 같습니다!

네 오늘은 이렇게 마무리하겠습니다!

오늘도 여러분 빠이팅하시고!

늘 편안한 하루 보내세요!