✏️ Tailwind CSS로 커스터마이징 가능한 텍스트 필드 만들기

✏️ Tailwind CSS로 커스터마이징 가능한 텍스트 필드 만들기

입력 필드(UI Text Field)는 모든 사용자 인터페이스에서 가장 많이 쓰이는 컴포넌트입니다.
이번 글에서는 Tailwind CSS를 이용해 placeholder, 폰트, 여백, 테두리 등을 자유롭게 조정할 수 있는 커스터마이징 가능한 텍스트 입력 필드를 만드는 방법을 소개합니다.

---

✅ 기본적인 입력 필드 구성

Tailwind로 텍스트 필드를 구성할 때 고려해야 할 주요 요소는 다음과 같습니다.

항목	설명	Tailwind 예시
크기	너비 및 높이	w-full, h-12
여백	내부 패딩	px-4, py-3
테두리	굵기, 둥근 정도	border, rounded-lg
폰트	크기, 굵기	text-base, font-medium
상태	포커스 시 효과	focus:outline-none, focus:ring
placeholder	글자 색상 조정	placeholder-gray-400

---

🧪 예제 코드: 커스터마이징 가능한 텍스트 필드

function TextField({
  placeholder = '텍스트를 입력하세요',
  value,
  onChange,
  fontClass = 'text-base font-medium',
  borderClass = 'border border-gray-200 rounded-xl',
  paddingClass = 'px-4 py-3',
}) {
  return (
    <input
      type="text"
      value={value}
      onChange={onChange}
      placeholder={placeholder}
      className={`
        w-full bg-white placeholder-gray-400
        ${fontClass} ${borderClass} ${paddingClass}
        focus:outline-none focus:ring-2 focus:ring-blue-400 transition
      `}
    />
  )
}

---

🎨 사용 예시

<TextField
  placeholder="삼겹살 파티, 디자인 회식"
  value={title}
  onChange={(e) => setTitle(e.target.value)}
  fontClass="text-lg font-semibold"
  borderClass="border border-gray-200 rounded-xl"
  paddingClass="px-5 py-3"
/>

---

✨ 확장 아이디어

• 🔹 disabled, error 상태를 위한 클래스 조건부 적용
• 🔹 아이콘이 포함된 텍스트 필드 (왼쪽 or 오른쪽)
• 🔹 label, 설명 텍스트와 함께 묶는 form-group 구성

---

✅ 마무리

Tailwind CSS는 클래스 조합만으로도 매우 유연하게 텍스트 필드를 구성할 수 있습니다.
컴포넌트화해 두면 다양한 스타일, 폰트, 테두리 형태로 손쉽게 커스터마이징이 가능하므로, 프로젝트마다 반복적으로 쓰이는 입력창을 효율적으로 관리할 수 있습니다.

---

📌 다음 글 예고

다음 글에서는 아이콘이 포함된 텍스트 필드, 또는 에러 메시지와 연동된 인풋 필드 상태 처리 방법을 소개할 예정입니다.
원하시는 확장 방향이 있다면 댓글로 알려주세요! 😊