怎麼用 Tailwind CSS 設定群組樣式？複製貼上的瀏覽器原生方法

每週用日記形式紀錄平日上班之餘鎖接觸到的新技術或是工具。順便分享給剛好看到的你！

今日重點

今天要分享的事情有兩個： tailwindcss 的樣式和 JavaScript 在瀏覽器上進行複製貼上的原生方法。

---

tailwindcss 群組樣式設定

在 tailwindcss 裡面，如果你要設定一個組件的整個樣式的話，你可以使用 group- 前綴詞，這樣就可以把整個區塊或是元件內用同樣的條件判斷式來調整樣式。

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

JS 原生複製貼上方法

navigator.clipboard.writeText()

第一次因為產品需求而知道這個功能，覺得挺方便的！想說做個紀錄，順便分享給大家。

---

以上就是今天的內容啦！
那我們下次見ʘ‿ʘ

---

參考資料

• Styling based on parent state (group-{modifier})
• Clipboard: writeText() method