Tailwind-完整教學快速UI開發-高度客製化-跟其他Library-的優勢

Tailwind 完整教學|快速UI開發 | 高度客製化 | 跟其他Library 的優勢?

介紹

Tailwind CSS 是一個工具型的CSS框架(Utility CSS)。 他提供的CSS Class 讓我們可以設計跟客製化任何元件(Component). 一般的CSS框架是屬於UI Library, 他們內建許多設計好的元件。 一開始可能可以讓你快速快發, 但是當你要客製化的時候就很痛苦😖。

Tailwind 不一樣是因為它提供了超級多的單一功能的CSS classes. (譬如.mt-4 代表margin-top: 1rem, .bg-gray-100 代表淺灰色)。 也是因為這樣,我們不會被任何現有的UI限制住。 我們可以自由發揮。 然後一些特殊情況,框架解決不了,那我們就用Inline CSS 或寫CSS。 接下來我再來深度介紹Tailwind,包括他的作者,資源,還有什麼要注意的。

基本資料

Tailwind 是在2017.11正式公開從v.0.1.0。Tailwind 是一個工具型框架特別是用來快速UI開發。他還可以透過PostCSS跟Javascript改變來客製化最後的CSS檔案。

除了Tailwind以外,其他工具型CSS框架還有Tachyons 跟 SpeedCSS。其實他們都差不多都是提供單一功能的CSS。只是Tailwind的市佔率比較大,可能是官方文件寫的比較漂亮,作者比較重視行銷,所以如果你在找工具型CSS框架,選擇Tailwind就對了。

作者

Adam Wathan 是Tailwind 的作者。 Adam本身除了是開發者以外,他還有自己的生意(Blog, 線上課程,Podcast 等等)。所以他是很有Marketing的經驗。這也是為什麼我覺得Tailwind會這麼成功的原因。

Tailwind vs Bootstrap

Tailwind Vs Bootstrap

為什麼我用Tailwind

為什麼我用Tailwind

我一開始接觸Tailwind是從Adam的網站看到的。我去年有購買Adam Refactoring UI的書。 題外話,如果對UI設計,或UI觀念有興趣的話可以參考一下對工程師還蠻有幫助的。

然後在網路上看了一些Adam的Tailwind影片, 那最後我在一個客戶案子想說試試看。結果效果超好的, 我在一個早上就把5頁的版型切版出來的,雖然頁面不會很難。

還有因為我本身是一位全職的接案者,所以方便修改對我來說也是非常重要。 以前修改我HTML, CSS, CSS Class Name 都需要重寫,那現在我只需要寫HTML,CSS。 而且Tailwind 的Design System 也很方便, 就是譬如顏色深淺,間隔大小,Shadow深淺,等等。 你不需要慢慢自己慢慢調整瑣碎的小事,可以先用Tailwind的,最後在調整。

Tailwind 資源 / 用Tailwind 做的網站

這裡推薦兩個網站,Firefox Send 還有東亞藝術塗料 (這個是我客戶的案子)。 所以如果Firefox都敢用你就不用擔心了

如果想看更多的Tailwind網站可以參考這個網站 https://builtwithtailwind.com/.

如果對Tailwind有興趣的話,可以參考這些學習資源

Tailwind 必須知道的

最後如果你打算用Tailwind,這3個觀念和重要。

  1. Preflight: Preflight 就像是加強版的normalize.css。 它是Tailwind版本的normalize css。如果你對normalize熟悉, preflight對你來說就不是問題了。基本上Preflight 就是把browser 還有CSS都預設好, 所以我們專注在開發商就可以了。(Preflight 連結🔗)
  2. PurgeCSS: Tailwind 本身是非常肥大的,480KB,比Bootstrap大兩倍。你要學會如何用PurgeCSS 來壓縮你的CSS。 通常壓縮後都可以保持在10kb以下。我幫客戶開發的也維持在8kb以下。
  3. 客製化 Configuration: 如果你不喜歡Tailwind的一些設定,譬如breakpoint, 顏色, margin。 你可以透過tailwind 的config 檔案來做設定。

影片教學

我在這個影片裡也會分享Tailwind 由來, 優勢,如何客製化,等等…

Part I
Part II

影片連結🔗 https://youtu.be/QQw5PJEap6I
頻道連結🔗 https://goo.gl/kG7uf5

總結

我個人蠻推薦Tailwind因為他可以提供客製化,快速開發。最後搭配PurgeCSS 通常可以把我們CSS檔案壓縮的很小。

#快速UI開發 #高度客製化 #工具型CSS

關於作者: Danny Huang

大家好,我是Danny,是位熱愛程式的前端工程師,具有豐富工作與接案經驗。我在這裡會陸續推出一些網頁開發,線上行銷的文章。 如果喜歡這方面的文章可以加入email list。