깜놀하는 해므찌로

CSS tag 예시 / tailwind 태그 줄바꿈 본문

IT

CSS tag 예시 / tailwind 태그 줄바꿈

agnusdei1207 2023. 8. 14. 18:46
반응형
SMALL

<div *ngIf="tags" class="flex flex-wrap gap-1">
        <div
          *ngFor="let tag of tags"
          class="flex items-center justify-center gap-1 px-2 py-1 text-white bg-gray-400 min-w-max rounded-xl"
        >
          <div class="text-sm">{{tag}}</div>
          <app-icon
            name="teenyicons:x-small-outline"
            class="w-5 h-5 cursor-pointer hover:text-danger-400"
            (click)="deleteTag(tag)"
          />
        </div>
      </div>

1. 태그들의 부모 HTML 태그에 flex, flex-warp

2. 자식 태그에는 min-w-max 를 사용하여 글씨의 길이에 따라 줄바꿈 및 크기 조절이 되도록 설정

반응형
LIST
저작자표시

'IT' 카테고리의 다른 글

nestjs search 검색 controller service 기본 구조 예시 feat.Prisma  (0) 2023.08.16
Angular 컴포넌트 cli 생성 시 앞에 이름 / prefix 수정하기  (0) 2023.08.15
Nestjs 비밀번호 / 비밀번호 확인과 같이 클래스 내 다른 property와 일치한 지 검증하고 싶을 때  (0) 2023.08.13
Nx nest Angular Guard 활용 예시 JWT Bearer  (0) 2023.08.11
Angular NX Interceptor 활용 예시 / JWT Bearer  (0) 2023.08.10
'IT' Related Articles more