프로그래밍 공부방

🐥 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를 하나 더 만들어서 해당 d..

🙀문제점 검색창을 구현하던 중에 focus인 경우 width의 길이를 늘리고 싶어졌습니다. 그래서 아래 코드처럼 focus를 적용해주었지만 동작하지 않는 문제가 있었습니다. ✨해결 방법 tailwind.config.js 파일에 아래와 같이 추가해줍니다. hover, focus 의 경우에 width를 설정할 수 있게 됩니다. // tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { // ... variants: { width: ["responsive", "hover", "focus"] // 추가한 부분 }, } 🐥💬 👉더 다양한 Tailwind의 Variants를 알고 싶다면?👈 Configuring Varian..