Tailwind CSS 줄바꿈

agnusdei·2023년 7월 5일
0

<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 를 사용하여 글씨의 길이에 따라 줄바꿈 및 크기 조절이 되도록 설정

0개의 댓글