[Tailwind CSS] inner width/height 설정하는 방법

🐥 Tailwind inner width/height 설정하는 방법

안녕하세요. 오늘은 간단하게 tailwind inner width/height 설정하는 방법에 대해서 알아보겠습니다.

border 때문에 layout이 묘하게 어긋나서 inner width/height을 설정하려고 했는데요..!

tailwind에 inner가 없었습니다 ㅠㅠ 따라서 그냥 따로 제가 설정해줬습니다.

방법은 매우 간단해서 설명한다고 하기 민망하네요...ㅎ

---

inner width/height 설정하기

실제 width/height을 적용할 크기의 div를 하나 만들어줍니다. (저는 안에 input file이 있어서 label로 설정해지만 별 상관 없습니다.) 그리고 그 안에 border를 적용할 div를 하나 더 만들어서 해당 div에 스타일을 적용해줍니다. 이렇게 하면 안쪽 div에 border를 설정해줘도 border 크기만큼 width나 height이 늘어나지 않고 원래 크기를 유지할 수 있게 됩니다!

<label className="h-0 w-full aspect-w-16 aspect-h-9 cursor-pointer flex items-center justify-center rounded-md">
  <div className="w-full h-full cursor-pointer text-gray-600 hover:border-orange-500 hover:text-orange-500 flex items-center justify-center border-2 border-dashed border-gray-300 rounded-md">
    <svg
      className="h-12 w-12"
      stroke="currentColor"
      fill="none"
      viewBox="0 0 48 48"
      aria-hidden="true"
    >
      <path
        d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  </div>
  <input {...register("image")} className="hidden" type="file" />
</label>

---

✨결과물

기존에는 저 점선 border 때문에 업로드될 사진 크기와 약간의 오차가 있어서 layout 변경이 있었습니다.

하지만 현재는 변화없이 일치하는 것이 보이시죠??!! 해결 ^~^