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

做個 Todo App

開始學習還是找個練習專案來做，雖然 Todo App 當作各種工具練習專案到老掉牙了(大概只比 Hello World App 好一點)，
不過還是拿來練一下手感，接下來這系列會來克隆一下 Microsoft To Do App。

--

這周就先完成左邊的側邊欄

需要切成幾部分來實作，

1. Account Header & Search
2. Intelligent List
3. Detail Todo List
4. Create Todo Area

實作

Account Header & Search

<div class="ml-4 my-4 flex justify-between items-center">
    <div class="flex items-center">
      <img class="inline-block h-8 w-8 rounded-full ring-2"
        src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        alt="">
      <div class="flex flex-col ml-2 justify-center">
        <div class="text-sm">Bobson Lin</div>
        <div class="text-xs text-gray-500">bobson.lin@email.com</div>
      </div>
    </div>
    <button class="w-10 h-10 inline-flex justify-center items-center text-gray-500 hover:bg-gray-100">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 " viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
      </svg>
    </button>
</div>

排版的 utility class 使用起來比較沒甚麼問題，基本都是用 flexbox 去排版，以及相關 class 去做對齊、置中...

不過比較不習慣的是，之前都是用 bootstrap 直接刻版，雖然 bootstrap4 以後也有文字的 utility class，
但文字上面通常都直接寫 HTML h 或 p 標籤。

Tailwind 需加上文字的 class，如 text-sm、 text-gray-500 等，基本上都能直接使用 div 包住就行，不用太多考量要用哪個 HTML 的文字標籤。

也就是說使用 Tailwind 開發只需要專心想要用哪些 utility class 就好，這點開發習慣上需要轉換。

--

Q. SVG 在 Button 中如何置中? (參考 Reference #1)
A. 使用 inline-flex，class 用 inline-flex justify-center items-center。

Intelligent List

  <ul class="w-56">
    <li class="px-2 py-2 hover:bg-gray-100">
      <div class="px-2 my-2 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
        <p class="mx-3">我的一天</p>
      </div>
    </li>
    ...
  </ul>

智慧列表(Intelligent List)的部分，我還是用習慣的 ul > li 去包，li 裡再包 svg + p

使用到的 icon 都是從 HeroIcons 找相似的來用。

Detail Todo List

  <ul>
    <li class="px-2 py-2 hover:bg-gray-100">
      <div class="px-2 my-2 flex items-center text-indigo-700 border-indigo-700 border-l-2">
        👋
        <p class="mx-3">使用者入門</p>
      </div>
    </li>
    ...
  </ul>

HTML 與前一部份結構相同，在被選擇到 item 上加上 class text-indigo-700 border-indigo-700 border-l-2。

svg 的部分也能使用表情符號取代。

Create Todo Area

  <div class="px-4 py-4 flex items-center justify-between text-gray-400">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
      </svg>
      <p class="mx-3">新增清單</p>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
    </svg>
  </div>

後面多加個 svg icon ，新增清單就完事囉~

小結

Demo

編譯結果

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

--

5 要求
19.2 kB 已轉移
26.6 kB 資源
完成:95 ms
DOMContentLoaded: 51 ms
載入:90 ms

如果完全沒用 JIT 和 purgeCSS，會變成

5 要求
336 kB 已轉移
3.3 MB 資源
完成:748 ms
DOMContentLoaded: 380 ms
載入:741 ms

所以記得把 tailwind.config.js 設定加進去~~

Reference

1. https://www.reddit.com/r/css/comments/hyq0o5/position_svg_bootstrap_icon_inside_button/fze62s1?utm_source=share&utm_medium=web2x&context=3