tailwindcss note

`@theme`

這個功能是在 4.0 以後才有的功能

不在用 tailwind.config.js 來設定 colors

@theme {
  --color-blue-50: #e6f0ff;
  --color-blue-100: #cce0ff;
  --color-blue-200: #99c2ff;
  --color-blue-300: #66a3ff;
  --color-blue-400: #3385ff;
  --color-blue-500: #0066cc;
  --color-blue-600: #005bb8;
  --color-blue-700: #0056b3;
  --color-blue-800: #004c9e;
  --color-blue-900: #004289;
  --color-blue-950: #003875;
}

`:has()`

group 的功能

<li class="px-3 py-2 cursor-pointer group">
  <p class="line-clamp-1">
    {{ session.name === '' ? 'No Title' : session.name }}
  </p>
  <i
    class="pi pi-trash opacity-0 group-hover:opacity-100 transition-opacity duration-200"
  ></i>
</li>

裡面的 group 是 Tailwind CSS 的一個功能，算是它的 “grouping variants” 機制。

簡單說明：

group 這個 class 本身其實不會產生任何樣式。
它的作用是讓子元素可以根據父元素的 hover、focus 等狀態改變樣式。
例如：group-hover:opacity-100，代表當父元素被 hover 時，這個子元素的 opacity 會變成 100。

在你這段程式碼中：

<li> 加了 group，讓它的子元素可以使用 group-hover 變化樣式。
<i class="pi pi-trash opacity-0 group-hover:opacity-100 ..."> 代表：這個垃圾桶 icon 預設 opacity: 0，當滑鼠 hover 在 <li> 上時，opacity 變成 100，也就是顯示出來。

可參考 Hover, focus, and other states

@theme​

:has()​

`@theme`

`:has()`