How to change a scroll bar height?

Question

This is my tailwind scroll bar and I want to change its height how can I do that? The below image shows its height. I cannot change the sm:h-96 can you suggest to me an method to change the height ?

 {/** Chat Scroll View */}
  <div class=" text-gray-500 bg-white rounded-lg border w-full max-w-xl sm:h-96 p-4 overflow-y-scroll scrollbar border-solid border-2 border-red-500">
    <div class="space-y-1">
      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/300"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Ryann Remo</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              23
            </small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/300"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Ryann Remo</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              23
            </small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/500"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Karp Bonolo</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              10
            </small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/500"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Karp Bonolo</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              10
            </small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md border-l-4 border-red-500">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/200"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Mercedes Yemelyan</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/600"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Cadi Kajetán</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
        </div>
      </div>

      <div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/650"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">Rina Samuel</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">15 April</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  {/** Chat Scroll View */}

Answer 1

If you want to change the height based on your preference you can use an arbitrary value like h-[120px] or h-[30rem] or h-[180px] for example. you can change the value inside the square brackets according to the height you want.

You can learn more about arbitrary values ​​in the tailwind documentation here: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values