[Tailwind CSS] hover일 경우 width의 길이 늘리기

🙀문제점

검색창을 구현하던 중에 focus인 경우 width의 길이를 늘리고 싶어졌습니다.

그래서 아래 코드처럼 focus를 적용해주었지만 동작하지 않는 문제가 있었습니다.

<form className="flex items-center w-1/3 focus-within:w-full">
    <input placeholder="제품 검색" className="outline-none w-full text-gray-600 p-2"/>
    <img src="/search_icon.svg" className="h-4/5" />
</form>

---

✨해결 방법

tailwind.config.js 파일에 아래와 같이 추가해줍니다.

hover, focus 의 경우에 width를 설정할 수 있게 됩니다.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  variants: {
    width: ["responsive", "hover", "focus"] // 추가한 부분
  },
}

 

길이 늘리기 전

길이 늘린 후

 

---

🐥💬

👉더 다양한 Tailwind의 Variants를 알고 싶다면?👈

Configuring Variants - Tailwind CSS