Note > tailwindcss

    <div className="sticky top-0 bg-blue-400 p-5 drop-shadow shadow-blue-600">
      <h1 className="text-white text-4xl text-center">sticky top-0</h1>
    </div>

sticky, top-0 속성을 이용해서 고정할수 있습니다. position: sticky;

"sticky": 이 클래스는 요소를 화면에서 고정시키는 데 사용됩니다.   top: 0px;

"top-0": 이 클래스는 요소를 부모 요소의 상단에 고정시키는 데 사용됩니다.  

구글 아이콘에 hover 속성을 줘서 색상을 바꿔보려고 합니다.

1.구글 아이콘을 검색후 svg 로 다운 받습니다.

2.tailwindcss의 fill속성을 이용해서 색상을 변경합니다.

1.구글 아이콘 svg 얻기

Material Symbols and Icons - Google Fonts

<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

처음 다운정보에는 xmlns정보가 있으나 삭제했습니다.

2. tailwindcss의 fill 속성을 이용해서 색상 변경하기

<svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

class="fill-black hover:fill-blue-500"  기본 검정, 마우스 hover일때 원하는 색상을 선택합니다. 현재 blue-500

처음에 stroke 속성인줄 알았으나 fill 이었습니다.

Fill - Tailwind CSS

<article className="flex flex-col w-full shadow my-4">
  <a href="#" className="hover:opacity-75">
    article &gt; a
  </a>
  <div className="bg-white flex flex-col justify-start p-6">
    <a href="#" className="hover:opacity-75"> 
      article a
    </a>
  </div>
</article>

1.요소의 바로 아래 있을경우 > 를 사용합니다.

article > a {
    color: blue;
}

결과

2.article 안쪽 전체의 a 요소 색상을 변경할 경우입니다.

article a {
    color: blue;
}

결과

display: flex;로 설정된 부모 컨테이너 내부의 자식 요소들을 정렬하는 데 사용됩니다.

tailwindcss에서 display: flex; 는 flex

<div>
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>

flex속성을 이용해서 Flexible Box Layout으로 만듭니다. 기본이 row인지 바로 옆으로 이동합니다.

<div class="flex">
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>

flex박스 안쪽 item들이 주축에서 공간을 나누도록 justify-between을 추가 합니다.

<div class="flex justify-between">
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>