此系列文章已改編成書，歡迎購買：https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw

初次見面

雖然 TaiwindCSS 於 2019 年發表，當時我正開始學習前端技術，對於此領域還有很多未知的地方，對於蓬勃發展且不斷進化的前端領域，一開始我也只是從最基本的 HTML + CSS 跨入，進而學習 SCSS 發現預處理器的優點以及模組化的概念，也在這時 RWD 的概念與熟練度才建立起來，接觸 Bootstrap 後，感到更便利了！當時就已經覺得切版似乎就是這樣了。

後來在專案上碰到 TailwindCSS 的時候，整個眼界被打開，竟然有比 Bootstrap 這個老字號更方便的框架，並且不用撰寫任何一行 CSS 外，還可以自由改動的樣式，所以開始投入此框架的學習。

值得振奮的是，台灣有團隊在做中文翻譯的官方文件，

本系列內容

維持著過去鐵人賽的初衷，一切從零開始的學習，從 TailwindCSS 最基本的概念認識，到基楚實作，dark 模式與 JIT 模式介紹，最後會帶到一個頁面的架構練習以及目前是使用 Angular 開發，所以也會介紹如何引入於 Angular 來使用 TailwindCSS。

從零開始的本懷

因為我是從完全不會寫網頁到現在轉職也將近一年的前端工程師，了解跨領域要挑戰網頁的困難點與痛點，畢竟轉職後身邊許多都是資工系本科的人在身邊，這時候都是很大神級的人物，而我自己又是中年轉職，壓力頗大，許多都是從零開始學習，所以這篇開始，希望可以讓只有聽過 TailwindCSS，或是完全沒碰過的新手作為一個參考，因篇幅關係，無法把全部的功能逐一介紹與使用，可能文中會有不足或是需要修改的地方，還請各位前輩不吝指教，我會盡快更新內容，以免誤人子弟，先感謝大家的閱讀，希望大家都可以一起來用 TailwindCSS 來開發網頁享受箇中樂趣！

參考資料

除了自己閱讀官方文件之外，也另外有參考六角學院校長去年鐵人賽的 CSS 的優良部分介紹到 TailwindCSS 而產生興趣，也有從 HISKIO 平台的 布魯斯的 Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI 中的學習知識點。

結語

感謝您看完本篇前言，如果您還有興趣，就跟著此系列文章開始學習 TailwindCSS 吧！