Astro + TailwindCSS v4 升級實戰：從 v3 到 v4 的完整遷移指南
最近將部落格從 TailwindCSS v3.4.18 升級到 v4.1.14，過程中踩了不少坑，特別是自訂顏色完全消失的問題讓我困擾了很久。這篇文章記錄完整的升級過程和解決方案，希望能幫助到有相同需求的朋友。 專案環境： Astro 5.14.1 Tailw
標籤：css
2025
2023
使用 SCSS 建立一個 Palette 產生器
宣告變數，以500為主色， 500 以下明度會依續遞增彩度降低，驅近於白 500 以上明度會依續遞減彩度降低，驅近於黑 A100 A700 則是改變主色的飽合度 這裡的變數宣告能當做是 js 裡的陣列，不過在 scss 裡 沒有 string 與 number
2019
JS地下城：11F-燈箱效果
【特定技術】不可用 JS 框架，只能單純用原生 JS。 【特定技術】需符合響應式設計。 【特定技術】當螢幕伸縮(resize)時，介面與 JS 功能也需正常 這次的關卡大部份就是練習 JS 的語法主要就是語法不熟 需要花時間去找出寫法 囧 這次燈箱的圖片 花了
JS地下城：4F-時區
【特定技術】僅能使用原生 JS 開始，不能使用套件 【特定技術】特別注意必須用 JS 處理各國時區 【書寫能力】請寫一篇 BLOG 來介紹你的挑戰過程，並介紹 JavaScript 如何提供 GMT、UTC 時區語法，以及何謂 TimeStamp。 這次使用了
JS地下城：1F-9x9 乘法表
【特定技術】需使用 JS for 迴圈技巧，裡頭數字不能直接寫在 HTML 上，需使用 JS 印 出。 需使用 HTML、CSS、JS 技術 介面需與設計稿一致 demo 頁 sourse code 其實這篤文也拖了蠻久才產出來的，算是新手入門題目，for 迴
利用 js 搭配 css 繪製折線圖
利用 畢氏定理 畫出兩點間的斜線 算斜率有兩種函數 分別為 Math.atan() 與 Math.atan2() Math.atan() 接受一個參數，用法如下： angel 為一個角度的弧度值，slope是直線的斜率，是一個數字，這個數字可以是負的無窮大到正
JS地下城：10F-Chrome 應用程式(幹話產生器)
【特定技術】請開發 Chrome extension，不需上架，投稿時請提供安裝檔放在雲端，以 供 GM 下載測試。 【特定技術】打開 Chrome 新頁(tab)時，會隨機顯示你自己新增的語錄，或者是幹話。 【特定技術】可切換夜間/日間模式 【特定技術】新增
JS地下城：9F-抽獎轉盤
【特定技術】2017 遊戲輪盤規則輪盤只能轉 20 次，人人有獎 Flight：1 份 Child：4 份 Anything：5 份 Wifi：5 份 Wish：5 份已經被抽到的獎項，就不可再次出現 【特定技術】2018 遊戲輪盤規則編號 20：69 份編號
JS地下城：8F-井字遊戲
【特定技術】先手為 O，後手為 X，某方獲勝時，上方會紀錄各方的獲勝戰績 【特定技術】每回合結束後，會判定結果頁(平手、Ｏ 獲勝、X 獲勝) 【特定技術】需符合 RWD，能在低螢幕解析度也能遊玩，介面不能超出 x 軸，至少在以 下解析度能夠遊玩。 iPhone
JS地下城：3F-計算機
【特定技術】數字位數過多時，不能因此而破版，計算機功能皆須齊全 這次使用 原生 JS 來挑戰這次關卡 demo 頁 sourse code 處理的問題有以下 ieee754 浮點數 字數過長 不造成破版 eval 加總 千分位進位 決定面版顯示資訊 做個 fl
JS地下城：6F-60秒算數遊戲
【特定技術】 0 20 秒為 1 位數計算 (5-3)，21 40 秒為 2 位數計算 (30\19)，41 60 秒為 3 位數計算 (332+312)，加減乘除規則請用隨機產生，不可寫 死題目，60 秒內可無限次數答題。 040 秒答對加一分，41 60
JS地下城：5F-全台空氣指標儀表板
【特定技術】必須使用 AJAX 技術串接資料 API，不可直些寫死資料在變數上。 【特定技術】上方切換城市(高雄、台北)後，下方會切換該城市的各地區 這次的關卡比較大的問題點就應該就是在 CORS 的問題處理上畢竟要用前端處理公開 api 這件事，本應由後經由
JS地下城：2F-時鐘
【特定技術】需使用 JS 原生語法的 getDate() 撈取時間，不可用套件 【特定技術】需使用 JS 原生語法的 setTimeout() 或 setInterval()，持續讓秒針、分 針、時針能夠以台北時區移動 這次時鐘的關卡，之 前js30 天的第二
2018
rwd 自適應文字大小
在寫 rwd 頁面縮放的時後，常常會遇到因為視窗做縮放 超出的文字會往下擠 為了不破壞設計的美感，當然也希望文字能做縮放啊！ 那文字該如何做設定才能隨著視窗做縮放呢 在這裡我選擇使用 rem 這個單位 rem 的文字基準取決於最外層的 html 文字大小，很適
css圓角概念
就是基本的圓角 四邊的值都一樣 以順時針方式 依續由 左上 右上 右下 左下 設定各四個值 如下圖所示 沒斜線 4em 表示為 左上與右下 8em 表示為 右上與左下 CSS 值裡有斜線 斜線前表示 x 軸 斜線前表示 y 軸 如下圖所示 這個圓看起來有點奇怪
2017
簡易 input focus 效果
input focus 的時後 去後 label 做變化 效果如下： 記得 input 裡一定要加 required 不然標題會一直卡在上面 css 注意要加上 -webkit-appearance: none; 這行屬性 取消 ios 的預設樣式 效果的話其
rwd 自適應高度大小
常常在寫網頁的時後 我們會需要設到寬跟高 但卻發生 為什麼寬能吃到 "%" 而高卻不能 在 pc 版的頁面上設置就算了 因為都是固定大小 但在這科技發展的時代裡 怎麼可能只有 pc 版的頁面呢!!? 當然是要加上目前引領時尚潮流的 RWD 呀 這樣拿出去才潮嘛
如何利用純 css 寫 switch 開關
利用 input checkbox 的 checked 特性來做到開關效果 效果如下： 可用 html 裡的 data 來當作選取器 避免 className 過多造成混亂 注意!! input 裡的 id 跟 label for 裡的名字記得要一樣 不然不會
input chexcbox
利用 css before、after 的特性 去修改裡面的 input 樣式 在 before 裡畫出一個 ✔ 使用矩形其中兩個長寬邊畫 border 線條 再利用 css3 rotate 屬性 旋轉 45 度 讓長寬兩個邊看起來像 ✔ 再來 將其比例縮小到