有空的話來學一下 Tailwind CSS - Week 3

實作步驟

主畫面部分，切成幾部分來實作，

1. Task List Header
2. Uncompleted Task List
3. Completed Task List
4. Create New Task List

實作

Task List Header

<div class="flex justify-between">
  <div class="flex items-center">
    <div class="text-2xl">👋</div>
    <div class="ml-2 p-1 text-3xl max-w-max text-gray-100 font-semibold hover:bg-indigo-700">使用者入門</div>
  </div>
  <div class="flex items-center">
    <button class="ml-4 w-7 h-7 rounded inline-flex justify-center items-center text-gray-100 bg-indigo-600 hover:bg-indigo-700">
      <svg ...></svg>
    </button>
    <button class="ml-4 w-7 h-7 rounded inline-flex justify-center items-center text-gray-100 bg-indigo-600 hover:bg-indigo-700">
      <svg ...></svg>
    </button>
  </div>
</div>

這部分相對簡單，不贅述。

Uncompleted Task List

<div class="my-[2px] p-4 h-14 rounded flex justify-between items-center bg-gray-50 hover:bg-gray-100">
  <div class="flex">
    <input type="checkbox" class="h-6 w-6 rounded-full text-indigo-500 focus:ring-0">
    <div class="ml-4 text-sm">
      <p>新增您的第一個工作，方法是按一下 ➕ 新增工作</p>
    </div>
  </div>
  <svg ...></svg>
</div>
<div class="my-[2px] p-4 h-14 rounded flex justify-between items-center bg-gray-50 hover:bg-gray-100">
  <div class="flex items-center">
    <input type="checkbox" class="h-6 w-6 rounded-full text-indigo-500 focus:ring-0">
    <div class="ml-4 text-sm">
      <p>開啟此工作的詳細資料檢視，將其新增至我的一天 🌞</p>
      <div class="flex items-center text-xs text-gray-500">
        <svg ...></svg>
          附註
      </div>
    </div>
  </div>
  <svg ...></svg>
</div>

任務卡片 class 以 h-14 rounded flex items-center 做排版及外型樣式。

--

Q. Checkbox Input 如何自訂樣式?
A. 原生地 checkbox 有些 class 樣式吃不到，所以 tailwind 官方提供的 plugin @tailwindcss/forms，就能使用 class 如 rounded-full text-indigo-500 focus:ring-0 來調整相關樣式。

Completed Task List

<div class="my-4">
  <button class="px-1 h-7 rounded inline-flex justify-center items-center text-gray-100 bg-indigo-600 hover:bg-indigo-700">
    <svg ...></svg> 
    <p class="mx-1">完成</p>
    <p class="mx-1">3</p>
  </button>
</div>

完成堆疊按鈕，與之前 Week2 時 Search 按鈕實現方式一樣

--

<div class="my-[2px] p-4 h-14 rounded flex justify-between items-center bg-gray-50 hover:bg-gray-100">
  <div class="flex items-center">
    <input type="checkbox" class="h-6 w-6 rounded-full text-indigo-500 focus:ring-0" checked>
    <div class="ml-4 text-sm">
      <p class="line-through">👉 選取此工作以新增提醒與到期日</p>
      <div class="flex items-center text-xs text-gray-500">
        <svg ...></svg> 
        Thu, Jun 17。
        <svg ...></svg> 
      </div>
    </div>
  </div>
  <svg ...></svg>
</div>

class 用 line-through 來顯示已完成任務的文字，像這樣 => 已完成的任務

Create New Task List

<div class="my-[2px] p-4 h-14 rounded flex items-center text-gray-50 bg-indigo-600 hover:bg-indigo-700">
  <svg ...></svg>
  <p class="ml-2">新增工作</p>
</div>

小結

Demo

編譯結果

生產環境編譯出來的 css 檔大約 694 行

--

5/6 要求
21.4 kB/21.4 kB 已轉接
42.9 kB/43.1 kB 資源
完成:549 ms
DOMContentLoaded: 398 ms
載入:543

Reference

1. https://github.com/tailwindlabs/tailwindcss-forms
2. https://fpjs.fun/tailwind/cookbook/component/checkbox/