In my next js app, I am using tailwind css for styling, but when I am writing custom properties in tailwind css like - w-[220px], h-[120px]

Question

import React from 'react'

const ShopBy = (props) => {
  return (
    <div className="flex items-center my-[40px]">
        <div className="w-[245px] h-[44px] border border-black rounded-full flex justify-center items-center">
          <p className="font-[500] text-[20px]">{props.name}</p>
        </div>
        <div className="border border-black flex-1"></div>
        <button className=" py-[12px] px-[13px] rounded-full text-blue-800 font-bold text-sm border border-black">View all </button>
    </div>
  )
}

export default ShopBy

In this code if I am giving w-[21rem] h-[42px] py-[21px] pl-[12px] these type of custom properties , it's not working, i am using nextjs 13 version