Tailwind Angular 토글 CSS 예시

<div
  [ngClass]="{
  'bg-primary after:top-0 after:left-6 peer-checked:after:translate-x-1/5': boolean,
  ' after:top-0 after:right-6 bg-gray-100': !boolean
}"
  class="w-11 h-6 peer-focus:outline-none rounded-full peer bg-gray-100 dark:bg-gray-100 peer-checked:after:border-gray-200 after:content-[''] after:absolute after:top-[0px] after:left-[0px] after:bg-white after:border-gray-200 after:border after:rounded-full after:h-6 after:w-6 dark:border-gray-300 after:transition-all"
></div>

1. peer-checked: 토글 버튼을 선택하는 순간 무조건 발동되므로, boolean 으로 조절

2. !boolean: 부분에는 peer-checked:after:translate 자리이동 하는 속성을 빼서 boolean 값이 false인 경우 그냥 자리에 그대로 있음