2. checkbox

local icons

checkbox에 사용할 icon을 src/assets/icons/ 폴더에 저장 (폴더 이름은 자유)

config

tailwind.config.js에 다음 코드를 추가

  theme: {
    extend: {
      backgroundImage: {
        'icon-checkbox': "url('~/src/assets/icons/ico_checkbox.svg')",
        'icon-checkbox-on': "url('~/src/assets/icons/ico_checkbox_on.svg')",
        'icon-checkbox-dis': "url('~/src/assets/icons/ico_checkbox_dis.svg')",
      },

이제 아이콘 이미지를 custom utility class로 사용할 수 있다.

css

src/app/globals.css 에 코드를 추가해도 되지만

refactoring을 위해 src/assets/css/checkbox.css 파일 생성하고

src/app/globals.css에서 import

@import url('../assets/css/checkbox.css');

다시 checkbox.css로 돌아와 위에서 정의한 utility class를 다음과 같이 작성.

그리고 tailwind css 기본 reset css에서 input tag를 완전히 reset 시켜주지 않으므로 여기서 다시 reset

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input {
    @apply appearance-none;
  }
}

@layer components {
  .checkbox {
    @apply mx-2 inline-block h-6 w-6 shrink-0 cursor-pointer bg-icon-checkbox bg-contain bg-center bg-no-repeat align-middle checked:bg-icon-checkbox-on disabled:bg-icon-checkbox-dis;
  }
}

component내에서 사용 예시

const CheckBox = () => {
  return (
    <div className="inline-flex gap-4 rounded-lg border border-gray-400 bg-white p-8">
      <div>
        <input className="checkbox" id="chk1" type="checkbox" />
        <label htmlFor="chk1">label</label>
      </div>
      <div>
        <input className="checkbox" id="chk2" type="checkbox" disabled={true} />
        <label htmlFor="chk2">disabled</label>
      </div>
    </div>
  );
};

export default CheckBox;