程式學習日記
26免費公開
自 2023/04 月起，一腳踏入學習前端程式的道路。文章記錄我的前端技術研究，以及 side project 細節、上課心得介紹。
GitHub：https://github.com/AnnChouCode
上篇介紹 MUI 基本安裝與使用方法，但我們不太可能用 MUI 完成整個網站的切版對吧？所以此篇將聚焦：MUI 與 Tailwind 協作、元件與主題客製化。這篇文章會更貼近實務應用情境作介紹。
上篇介紹 MUI 基本安裝與使用方法，但我們不太可能用 MUI 完成整個網站的切版對吧？所以此篇將聚焦：MUI 與 Tailwind 協作、元件與主題客製化。這篇文章會更貼近實務應用情境作介紹。
本篇文章介紹 MUI（原 Material UI）這個強大的 React UI 元件庫，涵蓋其核心元件、不同產品線、安裝與匯入元件的方式，以及如何在專案中套用樣式與主題。幫助開發者快速建立一致且具有品牌風格的介面。結論將引導讀者瞭解如何進一步自訂 MUI 的樣式主題。
本篇文章介紹 MUI（原 Material UI）這個強大的 React UI 元件庫，涵蓋其核心元件、不同產品線、安裝與匯入元件的方式，以及如何在專案中套用樣式與主題。幫助開發者快速建立一致且具有品牌風格的介面。結論將引導讀者瞭解如何進一步自訂 MUI 的樣式主題。
最近工作上可能要用 React + Tailwind 了，剛好正巧遇到 React 19 和 Tailwind 4.0 剛推出，尤其是 Tailwind 做了大改版，對我這樣剛好是這兩項技術的新手小白來說，還沒有更多文章可以參考，光是安裝也是摸索了一陣子。以下以 Vite 6 + React 18.
最近工作上可能要用 React + Tailwind 了，剛好正巧遇到 React 19 和 Tailwind 4.0 剛推出，尤其是 Tailwind 做了大改版，對我這樣剛好是這兩項技術的新手小白來說，還沒有更多文章可以參考，光是安裝也是摸索了一陣子。以下以 Vite 6 + React 18.
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成，此篇文章將介紹 Options API 的撰寫方式，以及如何做樣式客製化。
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成，此篇文章將介紹 Options API 的撰寫方式，以及如何做樣式客製化。
JavaScript 套件，頁碼 Pagination.js 搭配 axios API 請求範例
JavaScript 套件，頁碼 Pagination.js 搭配 axios API 請求範例
分享這套功能齊全，視覺超級可愛還有響應式變化，教學文件又很容易閱讀的套件 Evo Calendar。
當初在製作 JS side project 時，想找一個與 VCalendar 視覺相近的套件，但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例，也很
分享這套功能齊全，視覺超級可愛還有響應式變化，教學文件又很容易閱讀的套件 Evo Calendar。
當初在製作 JS side project 時，想找一個與 VCalendar 視覺相近的套件，但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例，也很
不喜歡 HTML 原生的時間選擇器外型嗎？試試看 flatpickr.js 吧！
以下是使用 flatpickr 做簡單的示例，以及 flatpickr 使用注意事項。
不喜歡 HTML 原生的時間選擇器外型嗎？試試看 flatpickr.js 吧！
以下是使用 flatpickr 做簡單的示例，以及 flatpickr 使用注意事項。
上篇介紹 MUI 基本安裝與使用方法，但我們不太可能用 MUI 完成整個網站的切版對吧？所以此篇將聚焦：MUI 與 Tailwind 協作、元件與主題客製化。這篇文章會更貼近實務應用情境作介紹。
上篇介紹 MUI 基本安裝與使用方法，但我們不太可能用 MUI 完成整個網站的切版對吧？所以此篇將聚焦：MUI 與 Tailwind 協作、元件與主題客製化。這篇文章會更貼近實務應用情境作介紹。
本篇文章介紹 MUI（原 Material UI）這個強大的 React UI 元件庫，涵蓋其核心元件、不同產品線、安裝與匯入元件的方式，以及如何在專案中套用樣式與主題。幫助開發者快速建立一致且具有品牌風格的介面。結論將引導讀者瞭解如何進一步自訂 MUI 的樣式主題。
本篇文章介紹 MUI（原 Material UI）這個強大的 React UI 元件庫，涵蓋其核心元件、不同產品線、安裝與匯入元件的方式，以及如何在專案中套用樣式與主題。幫助開發者快速建立一致且具有品牌風格的介面。結論將引導讀者瞭解如何進一步自訂 MUI 的樣式主題。
最近工作上可能要用 React + Tailwind 了，剛好正巧遇到 React 19 和 Tailwind 4.0 剛推出，尤其是 Tailwind 做了大改版，對我這樣剛好是這兩項技術的新手小白來說，還沒有更多文章可以參考，光是安裝也是摸索了一陣子。以下以 Vite 6 + React 18.
最近工作上可能要用 React + Tailwind 了，剛好正巧遇到 React 19 和 Tailwind 4.0 剛推出，尤其是 Tailwind 做了大改版，對我這樣剛好是這兩項技術的新手小白來說，還沒有更多文章可以參考，光是安裝也是摸索了一陣子。以下以 Vite 6 + React 18.
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成，此篇文章將介紹 Options API 的撰寫方式，以及如何做樣式客製化。
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成，此篇文章將介紹 Options API 的撰寫方式，以及如何做樣式客製化。
JavaScript 套件，頁碼 Pagination.js 搭配 axios API 請求範例
JavaScript 套件，頁碼 Pagination.js 搭配 axios API 請求範例
分享這套功能齊全，視覺超級可愛還有響應式變化，教學文件又很容易閱讀的套件 Evo Calendar。
當初在製作 JS side project 時，想找一個與 VCalendar 視覺相近的套件，但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例，也很
分享這套功能齊全，視覺超級可愛還有響應式變化，教學文件又很容易閱讀的套件 Evo Calendar。
當初在製作 JS side project 時，想找一個與 VCalendar 視覺相近的套件，但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例，也很
不喜歡 HTML 原生的時間選擇器外型嗎？試試看 flatpickr.js 吧！
以下是使用 flatpickr 做簡單的示例，以及 flatpickr 使用注意事項。
不喜歡 HTML 原生的時間選擇器外型嗎？試試看 flatpickr.js 吧！
以下是使用 flatpickr 做簡單的示例，以及 flatpickr 使用注意事項。