2026/08 on BenzHub

shadcn/ui:複製貼上、你擁有原始碼的元件庫 | TailwindCSS 完整教學

Mon, 31 Aug 2026 00:00:00 +0000

上一篇《無樣式元件庫》我們認識了 Radix + TailwindCSS 這個「一個管行為、一個管樣式」的黃金組合——但每次都要自己逐一安裝原語、拼裝子元件、寫一堆 data-* class,實在繁瑣。這一篇的主角 shadcn/ui 就是解法:它把「Radix + Tailwind + cva + cn()」整套打包成可複製貼上、你完全擁有原始碼的元件。它不是你 npm install 的套件,而是用 CLI 把元件複製進你自己的 repo,從此想怎麼改都行。

Workflows 持久化執行入門:崩潰也不重來 | Cloudflare 完整教學

Mon, 31 Aug 2026 00:00:00 +0000

上一篇《Queues 批次、重試與 DLQ》,我們把訊息佇列的容錯練到了生產級。但 Queues 有個天生的邊界:訊息即狀態,無法跨步驟保存進度,也不能睡眠等待。當一件工作需要「跨越多個步驟、每步獨立保存結果、就算中途崩潰也能從斷點續跑」時,你需要的是另一種更強的原語——Cloudflare Workflows 提供的 durable execution(持久化執行)。這一篇,我們就從零寫出第一個 Workflow,搞懂它為什麼「崩潰也不用重來」。

Queues 批次、重試與 DLQ:生產級容錯調校 | Cloudflare 完整教學

Sun, 30 Aug 2026 00:00:00 +0000

上一篇《Queues 訊息佇列入門》,我們把 producer → queue → consumer 的最小骨架搭了起來,學會用 send() 送、用 queue() handler 收。但那只是「能跑」;要在生產環境穩穩扛住流量,你還需要三樣東西:懂得調批次(Batch)與併發(Concurrency)來平衡吞吐與延遲、用指數退避(Exponential Backoff)聰明重試、以及設一張接住失敗訊息的安全網——Dead Letter Queue(DLQ,死信佇列)。這一篇,我們就把這些容錯能力一次補齊。

無樣式元件庫:Headless UI、Radix、React Aria | TailwindCSS 完整教學

Sun, 30 Aug 2026 00:00:00 +0000

上一篇《元件庫》我們比較了 daisyUI、Flowbite 這些有樣式元件庫——它們直接給你配好色的成品外觀,快,但外觀受制於預設。這一篇要走另一條路:無樣式(headless) 元件庫只借「行為與無障礙邏輯」,視覺百分之百由你用 TailwindCSS 自己刷。我們會拆解為何 headless + Tailwind 是黃金組合,比較 Tailwind 官方的 Headless UI、業界最常見的 Radix UI、以及無障礙最強的 Adobe React Aria,並動手做出 Dropdown 與 Dialog。

Queues 訊息佇列入門:Worker 非同步解耦第一步 | Cloudflare 完整教學

Sat, 29 Aug 2026 00:00:00 +0000

上一篇《DO 實戰:多人協作》,我們把 Durable Objects 的所有積木串成一個完整的即時系統,替「儲存資料」這條主線收了尾。這一篇,我們正式踏進非同步與工作流的新章節:當一個請求要做的事太重、或有大量彼此獨立的背景工作要跑時,同步處理會拖垮回應速度。Cloudflare Queues 就是那個「削峰填谷」的緩衝機制——它讓你的 Worker 學會把耗時工作丟進訊息佇列(Message Queue),再由獨立的 consumer 非同步批次消化,producer 與 consumer 徹底解耦,又快又穩。

TailwindCSS 元件庫比較:daisyUI、Flowbite、Preline 怎麼選 | TailwindCSS 完整教學

Sat, 29 Aug 2026 00:00:00 +0000

上一篇我們把 cn()、cva 這些最佳實踐工具鏈織成了現代元件的骨架。這一篇往上一層:當你不想每個 Button、Modal 都從零刻起,元件庫(Component Libraries) 就是別人已經替你組好、可以直接取用的成品。但市面上光是「有樣式」的 TailwindCSS 元件庫就有好幾套——官方付費的 Tailwind Plus、純 CSS 的 daisyUI、帶互動的 Flowbite 與 Preline。它們定位不同、取捨不同,選錯了地基,後面會很痛。這篇帶你把它們一次比清楚。

DO 實戰:多人協作聊天室從零打造 | Cloudflare 完整教學

Fri, 28 Aug 2026 00:00:00 +0000

上一篇《DO RPC 與跨物件呼叫》,我們讓 Durable Object 學會彼此型別安全地呼叫協作。這一篇是 DO 的收尾實戰:我們要把前面學到的所有積木——WebSocket Hibernation 廣播、SQLite Storage 存訊息、Alarms 排程清理、以及單執行緒一致性——全部串起來,用「每個房間一個 DO」的架構,從零逐段 build 出一個真正能用的即時協作聊天室。你會看到房間怎麼路由、連線怎麼管理與廣播、訊息怎麼持久化與回放、以及 **presence(在線名單)**怎麼同步。

TailwindCSS 最佳實踐:clsx、tailwind-merge 與 cva 工具鏈 | TailwindCSS 完整教學

Fri, 28 Aug 2026 00:00:00 +0000

一路學到這裡,你已經會抽元件、會處理暗色模式,能寫出規模化的 TailwindCSS 介面了。但「能跑」和「好維護」之間,還隔著一整套慣例:class 該怎麼排序才不製造 diff 噪音?條件式樣式怎麼寫才乾淨?兩個衝突的 class 誰勝出?變體一多怎麼管?這篇要把這些散落的經驗法則收攏成一套完整的最佳實踐工具鏈——prettier-plugin-tailwindcss、clsx、tailwind-merge、cva,以及把它們縫在一起的 cn() 工具,帶你把前面所學織成一套經得起團隊協作的工作流。

DO RPC 與跨物件呼叫:型別安全取代 fetch 手動路由 | Cloudflare 完整教學

Thu, 27 Aug 2026 00:00:00 +0000

上一篇《DO WebSocket Hibernation》,我們讓 Durable Object 能扛住成千上萬條長連線又不燒錢。這一篇,我們處理系統長大後的下一個問題:當 DO 越來越多,它們之間、以及 Worker 與 DO 之間,該如何「互相呼叫、協調」?答案是 RPC(Remote Procedure Call,遠端程序呼叫)。只要你的類別 extends DurableObject,就能在上面定義 public 方法,呼叫端拿到 stub 後就像呼叫本地函式一樣 await stub.method(args),享有完整 TypeScript 型別推斷——徹底取代過去用 fetch 手動拼 URL、手動解析的繁瑣路由。你會學到 RPC 的型別安全、structured clone 序列化規則、RpcTarget、以及用 WorkerEntrypoint 做 Service Bindings 的 Worker↔Worker RPC。

TailwindCSS 元件抽象模式:@apply、@utility 與框架元件三選一 | TailwindCSS 完整教學

Thu, 27 Aug 2026 00:00:00 +0000

一路學到這裡,你已經能寫出響應式、有狀態、還會明暗切換的介面——但你八成也發現一件事:同一顆按鈕、同一張卡片的那串 utility class,在每個頁面都要再抄一遍,又臭又長還容易不一致。這篇 TailwindCSS 要解決的正是這個規模化痛點:重複的 class 該怎麼收斂? 我們會把三種抽象策略——框架元件、@apply、v4 的 @utility——攤開來對比,講清楚何時該抽象、何時該保持 utility inline,並釐清 @apply 的正確與濫用時機。

DO WebSocket Hibernation:讓閒置連線省下計費 | Cloudflare 完整教學

Wed, 26 Aug 2026 00:00:00 +0000

上一篇《DO Alarms 定時器》,我們替 Durable Object 裝上了可靠、可重試的定時器,讓它能在未來某刻自己醒來做事。這一篇,我們碰 DO 最招牌的能力:長時間持有 WebSocket 連線。但有個關鍵陷阱——用「一般的 WebSocket」寫法,DO 會為了等訊息而全程醒著計費,就算連線整天閒著也一樣。Cloudflare 為此設計了 WebSocket Hibernation(休眠):用 ctx.acceptWebSocket 接受連線後,DO 能在空閒時釋放記憶體、暫停計費,但連線不斷。你會學到 acceptWebSocket、webSocketMessage/Close/Error handlers、用 serializeAttachment 跨休眠保存狀態,以及用 getWebSockets() 廣播——讓大量閒置連線也能省下絕大部分成本。

TailwindCSS 暗色模式:dark: 變體、v4 切換策略與 FOUC 完整解 | TailwindCSS 完整教學

Wed, 26 Aug 2026 00:00:00 +0000

前面幾篇我們把介面練得會隨螢幕伸縮、會回應使用者的每個動作,但畫面始終停在明亮的淺色底上。現代網站幾乎都得提供暗色模式(Dark Mode),讓使用者在夜間或偏好深色時獲得舒適的閱讀體驗。這一篇 TailwindCSS 的暗色模式,要用 dark: 變體搭配三種策略(跟隨系統的 media、手動切換的 class、屬性驅動的 data-*),再帶你用 v4 的 @custom-variant 打造一鍵切換、能記住偏好、又不會閃爍的明暗系統,讓你的介面在白天與黑夜都同樣好看。

DO Alarms 定時器:讓每個物件自己醒來做事 | Cloudflare 完整教學

Tue, 25 Aug 2026 00:00:00 +0000

上一篇《DO SQLite Storage》,我們讓 Durable Object 能建表、查詢、做原子交易,成了一個有結構的有狀態服務。但它還缺一種能力:在未來某個時間點「自己醒來」做事。這一篇,我們深入 Cloudflare 的 DO Alarms——每個 Durable Object 私有的定時器。你會學到 ctx.storage.setAlarm / getAlarm / deleteAlarm 與 alarm() handler、如何用「在 alarm 內重新排程」實作週期性任務、靠平台的自動重試做到可靠執行、用去抖動批次聚合省下大量寫入,並徹底分清 Alarms(每實例)與 Cron Triggers(全域)的差別。

TailwindCSS 狀態變體:hover、group、peer 與 v4 has-* 全解 | TailwindCSS 完整教學

Tue, 25 Aug 2026 00:00:00 +0000

上一篇我們讓版面「隨螢幕大小伸縮」,但一個真正好用的介面還有另一半靈魂:同一個按鈕,滑鼠移上去要變色、按下去要凹陷、鍵盤 focus 時要有外框、被禁用時要變灰。這一篇 TailwindCSS 的狀態變體(State Variants),要用 hover:、focus:、active:、disabled: 這組互動與表單前綴,加上 group-*(父子連動)、peer-*(兄弟連動),以及 v4 新增的 has-*(父依子)、not-*、in-* 與 aria-*/data-* 屬性變體,讓介面隨著使用者的每一個動作活起來。

DO SQLite Storage:每個物件內建的資料庫 | Cloudflare 完整教學

Mon, 24 Aug 2026 00:00:00 +0000

上一篇《Durable Objects 入門》,我們用最簡單的 ctx.storage.get/put 讓計數器把值存下來。但那只是冰山一角——Cloudflare 的每個 Durable Object 其實都內建一個完整的 SQLite 資料庫,能跑同步 SQL、建索引、做原子交易,而且讀寫延遲趨近於零。這一篇,我們深入 ctx.storage:分清 KV-style API(get/put)與 SQL API(ctx.storage.sql.exec)、學會用 transactionSync 做原子交易、用 new_sqlite_classes 啟用 SQLite backend,並把最重要的一個決策講透:DO+SQLite 與 D1 到底該怎麼分工。

TailwindCSS 響應式設計:斷點、mobile-first 與容器查詢全解 | TailwindCSS 完整教學

Mon, 24 Aug 2026 00:00:00 +0000

前面 23 篇我們把單一畫面「排得整齊、看得漂亮、用起來順手」,但真實世界的網頁必須同時面對手機、平板、桌機三種天差地遠的螢幕。這一篇 TailwindCSS 的響應式設計(Responsive Design),要用 sm:、md:、lg:、xl:、2xl: 這組斷點(breakpoint)前綴,加上 mobile-first(行動優先)哲學、v4 內建的 max-* 區間變體、任意斷點 min-[...],以及依「容器寬度」而非視窗寬度響應的容器查詢(container query)@container,讓同一份程式碼,在所有螢幕上都呈現最佳樣貌。

Durable Objects 入門:邊緣上的有狀態協調 | Cloudflare 完整教學

Sun, 23 Aug 2026 00:00:00 +0000

上一篇《D1 Time Travel 與備份》我們為資料庫補上最後一道防線,也就此告別「資料表」的世界。這一篇,我們踏進 Cloudflare 上更強大的有狀態運算基元——Durable Objects(持久物件)。無狀態的 Worker 擅長處理獨立請求,卻無法讓多個用戶端「對同一份狀態」達成一致。Durable Objects 用一個關鍵保證解決這件事:對同一個名稱,全球只有一個活躍實例,並以單執行緒序列化執行,天然消除競態條件。這篇是 DO 系列首篇,我們先把「什麼是 DO、為何需要它、怎麼取得並呼叫它」講透,寫出你的第一個計數器。

TailwindCSS 互動性:cursor、scroll-snap、field-sizing 全解 | TailwindCSS 完整教學

Sun, 23 Aug 2026 00:00:00 +0000

前幾篇我們把元素「排得整齊、看得漂亮」,這一篇要讓介面真正「用起來順手」。TailwindCSS 的互動性(Interactivity)工具,涵蓋 cursor-*(游標樣式)、pointer-events-*(指標事件穿透)、select-*(文字選取)、resize-*(縮放把手)、scroll-smooth 與 snap-*(滾動吸附輪播)、touch-*(觸控行為)、以及 v4 新增的 field-sizing-content(自動長高)、scheme-*(配色宣告)、accent-*(強調色)、caret-*(游標色)、will-change-*(渲染提示)與 appearance-none(移除原生外觀)。這一組看似瑣碎的細節工具,正是把介面從「能操作」打磨到「好操作」的關鍵——讓每一次點擊、滑動、輸入都恰到好處。

D1 Time Travel 與備份:時間點還原與災難復原 | Cloudflare 完整教學

Sat, 22 Aug 2026 00:00:00 +0000

上一篇《D1 Sessions API 與讀取複本》,我們讓全球讀取又快又不失一致。但資料庫的日常從來不缺意外——手滑一個 DROP TABLE、跑錯一條沒加 WHERE 的 UPDATE、一個壞掉的 migration 把 schema 搞砸。這時你需要的是「時光倒流」。Cloudflare D1 內建的 Time Travel(時間點還原) 永遠啟用、免費,能把資料庫還原到過去 30 天內任一時刻;搭配 wrangler d1 export/import 的匯出匯入與 R2 長期封存,就能建立起完整的備份、還原與災難復原防線。這篇我們把 Time Travel 的 info/restore、書籤撤銷、匯出匯入,到災難復原流程一次講透,為 D1 系列收尾。

TailwindCSS 表格與清單：table、list 響應式排版全解 | TailwindCSS 完整教學

Sat, 22 Aug 2026 00:00:00 +0000

上一篇讓元素「動起來、變好看」，這一篇要把視線轉向內容本身的結構化呈現。TailwindCSS 的表格與清單工具，涵蓋 border-collapse／border-separate（邊框合併或分離）、border-spacing（儲存格間距）、table-layout（table-auto／table-fixed 決定欄寬策略）、caption-side（表格說明位置），以及清單的 list-style-type（項目符號樣式）、list-inside／list-outside（符號位置）、list-image（自訂圖片符號）。搭配 overflow-x-auto、divide-y、truncate 這些老朋友，你就能打造出既專業又響應式的資料表與美化清單——讓內容從「能看」升級到「好讀」。

D1 Sessions API 與讀取複本:全球低延遲讀取 | Cloudflare 完整教學

Fri, 21 Aug 2026 00:00:00 +0000

上一篇《D1 Migrations》我們學會了像 Git 一樣安全地演進資料表結構。但當你的應用擴張到全球、讀取流量湧入,新的問題浮現:主要資料庫(Primary)在美國西部,新加坡的使用者每次讀取都要繞半個地球,延遲高得惱人。D1 的 讀取複本(Read Replication) 讓你在全球六個地區部署唯讀副本,使用者就近讀取;而 Sessions API 則是啟用複本的鑰匙,並透過 書籤(Bookmark) 機制,在「低延遲」與「一致性」這對天生矛盾之間取得平衡。這篇我們把 env.DB.withSession() 的 first-primary / first-unconstrained 兩種模式、read-your-writes(讀取自身寫入)、書籤的跨請求傳遞,以及成本與一致性的權衡一次講透。

TailwindCSS 過渡與動畫：transition、animate 全解 | TailwindCSS 完整教學

Fri, 21 Aug 2026 00:00:00 +0000

上一篇讓元素學會了放大、旋轉、翻面，這一篇讓這些動作真正「流暢起來」。TailwindCSS 的過渡與動畫系統分成兩大支柱：transition（過渡）負責把狀態切換（如 hover 變色、按鈕縮放）變得平順，由屬性（property）、時長（duration）、緩動（ease）、延遲（delay）四要素組成；animate 則提供自主循環的動畫，內建 animate-spin、animate-ping、animate-pulse、animate-bounce 四種常用效果，並可透過 @theme 搭配 @keyframes 定義專屬動畫。而 v4 更帶來 @starting-style 進場動畫、transition-discrete 離散屬性過渡，以及 motion-safe／motion-reduce 無障礙變體，讓動效既漂亮又體貼。

D1 Migrations:用版本控制管理資料表結構 | Cloudflare 完整教學

Thu, 20 Aug 2026 00:00:00 +0000

上一篇《D1 入門:Serverless SQLite》我們學會了在 Workers 裡用 SQL 建表、查資料、做交易。但真實專案的資料表結構不會一次定案:今天加個 posts 表、明天幫 users 加個欄位、後天補幾個索引。如果每次都手動 wrangler d1 execute 一堆 SQL、還要用人腦記「本地套過沒、遠端套過沒」,遲早會亂。這就是 D1 Migrations(資料庫遷移)要解決的問題——它讓你像 Git 管理程式碼一樣,把 schema 的每一次變更變成有編號、可追蹤、可重播、跨環境一致的版本。這篇我們把 wrangler d1 migrations create / list / apply 一路走完,含遷移檔命名順序、--local vs --remote、種子資料、CI 自動遷移,以及和 Drizzle ORM 搭配的思路。

TailwindCSS 變形 Transform：scale、rotate、3D 全解 | TailwindCSS 完整教學

Thu, 20 Aug 2026 00:00:00 +0000

上一篇替畫面裝上了「鏡頭」，這一篇讓元素真正「動起來」。TailwindCSS 的變形（Transform）系統涵蓋 scale（縮放）、rotate（旋轉）、translate（位移）、skew（傾斜）四種 2D 變形，以及 transform-origin（變形原點），讓你不改動版面就能放大、旋轉、位移、傾斜任何元素。而 v4 更新增了一整套原生 3D 變形工具——perspective、rotate-x/y/z、translate-z、transform-3d、backface——過去要靠自訂 CSS 才能做的卡片翻轉、3D 傾斜，現在用純 class 就能完成。搭配過渡（transition），變形正是 hover 放大、翻轉卡片、滑入動畫等互動效果的核心引擎。

D1 入門:Serverless SQLite,在邊緣用 SQL 查資料,免管理資料庫 | Cloudflare 完整教學

Wed, 19 Aug 2026 00:00:00 +0000

上一篇《R2 物件儲存》我們把「大型檔案」搬上了雲,但很多應用真正需要的其實是結構化的關聯式資料:使用者表、訂單表、商品表,要能用 SQL 做 JOIN、WHERE、交易——這是 KV 和 R2 都不擅長的。這一塊,Cloudflare 交給了 D1:一個底層是 SQLite、跑在**邊緣(edge)**的 Serverless 關聯式資料庫。這篇我們從什麼是 D1、怎麼用 wrangler d1 create 建庫 + binding、wrangler d1 execute 建表,到查詢核心 prepare / bind / first / all / run、batch 交易、參數化查詢防注入,以及本地 vs 遠端的差別,一路帶你在 Workers 裡用熟悉的 SQL 查資料。

TailwindCSS 濾鏡：blur、backdrop-blur 毛玻璃全解 | TailwindCSS 完整教學

Wed, 19 Aug 2026 00:00:00 +0000

上一篇替版面點上了「光影」，這一篇替畫面裝上「鏡頭」。TailwindCSS 的濾鏡系統涵蓋 filter 系列（blur 模糊、brightness／contrast 明暗、grayscale／sepia 去色、saturate 飽和度、hue-rotate 色相、invert 反色、drop-shadow 輪廓陰影）與 backdrop-filter 系列（backdrop-blur 等，做出毛玻璃效果）。這些工具讓你不改圖片檔本身，就能即時調色、模糊、做出玻璃擬態與影像級質感。v4 對這套系統做了關鍵簡化——濾鏡工具會自動組合、不再需要額外加 filter class。這一篇會帶你替版面加上最後一層「鏡頭濾鏡」。

R2 物件儲存:S3 相容、零 egress,存大檔不再被流量費坑 | Cloudflare 完整教學

Tue, 18 Aug 2026 00:00:00 +0000

上一篇《KV 進階:一致性與快取》收尾時我們留了一個問題:KV 單值上限只有 25 MiB,而且它根本不是為「大型二進位檔案」設計的。那圖片、影片、使用者上傳的文件這些又大又重的東西該存哪?答案就是 Cloudflare R2——一個 S3 相容(S3-compatible)、而且零 egress 費用的物件儲存(object storage)。這篇我們從什麼是 R2、怎麼建 bucket + binding、get / put / list / delete 到 multipart 大檔上傳、httpMetadata、presigned URL 直傳、公開存取與自訂網域,一路帶你把大檔搬上 R2,不再被流量費坑。

TailwindCSS 陰影與效果：shadow、opacity、mix-blend 全解 | TailwindCSS 完整教學

Tue, 18 Aug 2026 00:00:00 +0000

上一篇替版面描好了「邊」與「角」，這一篇替每個區塊點上「光」。TailwindCSS 的陰影與效果系統涵蓋 shadow-*（盒陰影）、shadow-<color>（彩色陰影）、v4 全新的 inset-shadow-*（內側陰影）與 text-shadow-*（文字陰影），再加上 opacity（不透明度）、mix-blend-mode（混合模式）與 bg-blend-*（背景混合）。這些工具是打造卡片層次、發光按鈕、玻璃擬態與品牌視覺的核心。v4 對這套系統動了幾刀——盒陰影刻度整體平移、新增 inset-shadow-* 與 text-shadow-*、陰影顏色可直接用 / 透明度修飾符。這一篇會帶你替扁平的版面加上最關鍵的一層立體感。

KV 進階:一致性與快取,把邊緣讀取用得又快又對 | Cloudflare 完整教學

Mon, 17 Aug 2026 00:00:00 +0000

上一篇《KV 鍵值儲存入門》我們刻意在**最終一致性(eventual consistency)**上點到為止。這一篇,我們把它徹底拆開:寫入後究竟多久全球才會同步?為什麼連同一次請求裡讀都可能是舊值?cacheTtl 怎麼調校邊緣快取?expiration 與 expirationTtl 差在哪?為什麼每個 key 每秒只能寫 1 次,遇到高頻計數該怎麼辦?讀完這篇,你會把 Cloudflare KV 從「會用」升級到「用得又快又對」。

TailwindCSS 邊框：border、rounded 圓角、ring 焦點環全解 | TailwindCSS 完整教學

Mon, 17 Aug 2026 00:00:00 +0000

上一篇替版面上好了「面」與「光」，這一篇替每個區塊「描邊、圓角、分隔」。TailwindCSS 的邊框系統涵蓋 border（佔空間的邊框）、rounded（圓角）、ring（不佔空間的焦點環）、outline（輪廓）與 divide（子元素分隔線）五大類。v4 對這套系統動了幾刀——border 預設色改成 currentColor、ring 預設寬度從 3px 降為 1px，還新增了獨立的 inset-ring-* 內側環。這一篇會帶你把邊框、圓角與分隔線做得又俐落又有層次。

KV 鍵值儲存入門:在邊緣讀寫資料的第一步 | Cloudflare 完整教學

Sun, 16 Aug 2026 00:00:00 +0000

到目前為止,我們寫的 Worker 大多是「無狀態」的——處理完一個請求就忘光一切。但真實的應用需要記住資料:使用者的設定、快取、feature flag、session……這些該存在哪?這一篇,我們正式進入 CF-3 儲存資料,從 Cloudflare 最容易上手的邊緣儲存方案——Workers KV(Key-Value 鍵值儲存) 開始。你會認識什麼是全球分散、讀取最佳化的鍵值儲存、學會建立 namespace 與 binding、用 get / put / list / delete 讀寫資料、掌握 text / json / stream / arrayBuffer 四種 value 型別與 getWithMetadata,並釐清哪些場景最適合把資料交給 KV。

TailwindCSS 背景與漸層：bg-linear、bg-radial、mask 遮罩全解 | TailwindCSS 完整教學

Sun, 16 Aug 2026 00:00:00 +0000

上一篇替版面上好了「色」，這一篇把單一顏色延伸成「面」與「光」。TailwindCSS 的背景工具組涵蓋背景色、背景圖，以及最迷人的漸層系統。v4 把漸層語法整個翻新——bg-linear-to-r（線性）、bg-radial（徑向）、bg-conic（錐形）三種漸層搭配 from／via／to 色標與位置百分比，還新增了 bg-linear-45 角度語法與一整組 mask 遮罩工具。這一篇會帶你玩透背景與漸層，讓版面從「有顏色」進化到「有質感」。

CI/CD 自動化部署:用 GitHub Actions + wrangler-action 打造無人值守發布流水線 | Cloudflare 完整教學

Sat, 15 Aug 2026 00:00:00 +0000

上一篇我們把 漸進式部署 講透,你已經能手動完成「上傳、放量、監控、回滾」一整套安全發布。但這些指令每次發布都要手動敲一遍,既繁瑣又容易出錯。這一篇,我們就把它自動化——用 GitHub Actions 搭配官方的 cloudflare/wrangler-action,把「push 程式碼 → 自動 lint/test → 自動部署」串成一條無人值守的流水線。你會學會建立最小權限 API Token、設定 CLOUDFLARE_API_TOKEN / CLOUDFLARE_ACCOUNT_ID Secrets、寫出 staging/production 環境分流的完整 workflow,並對比 Cloudflare 原生的 Workers Builds。這是 CF-2 部署工具系列的收尾篇。

TailwindCSS 色彩系統：50–950 色階、OKLCH 與透明度速記 | TailwindCSS 完整教學

Sat, 15 Aug 2026 00:00:00 +0000

版面搭好了，是時候替它上色。TailwindCSS 內建一套精心設計的調色盤：22 種色相、每種從 50 到 950 共 11 個明度色階，透過 text-*／bg-*／border-*／ring-* 統一套用，還有一顆斜線就搞定的透明度速記（bg-blue-500/50）。這一篇會帶你認識整套色階系統、v4 預設改用的 OKLCH 廣色域、如何用 @theme 打造品牌色，以及對比度與透明度的最佳實踐。這是 TailwindCSS 完整教學 系列的第十五篇，也是視覺樣式章（TW-4）的開場。

TailwindCSS 常見版面模式：Holy Grail、Sticky Footer、置中與卡片網格 | TailwindCSS 完整教學

Fri, 14 Aug 2026 00:00:00 +0000

版面章走到這裡，你手上已經集滿了 Flexbox、Grid、定位、間距與尺寸五套工具。這一篇不再教新 utility，而是把它們串成真正能用的版面骨架——垂直水平置中、Sticky Footer 黏底頁尾、Holy Grail（三欄聖杯）、後台 Sidebar 版面、響應式卡片網格與 Media Object。每一種都附上可直接貼進頁面執行的 TailwindCSS v4 範例，並清楚說明何時該用 flex、何時該用 grid，讓你從「認得每顆工具」躍升到「一眼就知道該用哪套組合」。這是 TailwindCSS 完整教學 系列的第十四篇，也是版面章（TW-3）的收尾。

漸進式部署與版本:用 wrangler versions 做金絲雀放量與一鍵 rollback | Cloudflare 完整教學

Fri, 14 Aug 2026 00:00:00 +0000

上一篇我們把環境管理與 Secrets 講透,結尾埋了一個大伏筆:Cloudflare 有一套「上傳新版本卻不立即全量上線」的安全發布機制。這一篇,我們就把它一次講透。你會弄懂 版本(Version) 與 部署(Deployment) 的本質差異,學會用 wrangler versions upload 把新版本上傳到「候補區」、用 wrangler versions deploy 按百分比做金絲雀(canary)放量——先切 10% 流量、搭配 observability 監控錯誤率,確認無誤才逐步升到 100%。出問題時,一行 wrangler rollback 一鍵回滾。讀完,你就能做到真正的「零停機、可觀察、可回滾」發布。

TailwindCSS 尺寸系統：width、height、size-* 完整指南 | TailwindCSS 完整教學

Thu, 13 Aug 2026 00:00:00 +0000

在 TailwindCSS 裡，尺寸系統（Sizing） 決定了版面上每個元素到底該「多大」——按鈕多寬、頭像多高、容器最大寬度是多少、全螢幕區塊該用哪種高度單位。只要用 w-*（width）、h-*（height）控制寬高，用 min-w-*／max-w-*／min-h-*／max-h-* 設下上下限，再搭配 v4 新增的 size-* 雙軸簡寫、分數寬度 w-1/2、螢幕與容器單位 w-full／min-h-dvh，就能讓元素大小落在同一套一致刻度上。這是 TailwindCSS 完整教學 系列的第十三篇，我們會把寬、高、上下限、size-*、內容尺寸與任意值一次講透，以 v4 為預設、標註與 v3 的差異。

環境管理與 Secrets:staging/production 分流與 wrangler secret 安全實踐 | Cloudflare 完整教學

Thu, 13 Aug 2026 00:00:00 +0000

上一篇我們把 wrangler.jsonc 從頭拆到尾,還埋下兩個伏筆:「敏感值不要放 vars」與「用 env 區分 staging 與 production」。這一篇,我們就把這兩件事一次講透。你會學到怎麼用 env.staging / env.production 設定塊搭配 --env 參數把環境分流,弄懂 vars(明文) 與 Secrets(加密) 的本質差異,實作 wrangler secret put / list / delete、.dev.vars 本地機密與 Secrets Store,最後示範在 CI/CD 中如何安全注入機密。讀完,你的 staging 與 production 就能各行其道、敏感資訊滴水不漏。

TailwindCSS 間距系統：padding、margin、space、gap 完整指南 | TailwindCSS 完整教學

Wed, 12 Aug 2026 00:00:00 +0000

在 TailwindCSS 裡，間距系統（Spacing） 是決定版面「呼吸感」的靈魂——元素內部要留多少 padding、彼此之間要隔多遠 margin、一排子項要用什麼方式拉開，全靠這套工具。只要用 p-*／px-*／py-* 控制內距、m-*／mx-auto 控制外距與置中、space-x-*／space-y-* 或 gap-* 控制子元素間隔，就能把一個「擠成一團」的版面調成「疏密有致」。這是 TailwindCSS 完整教學 系列的第十二篇，我們會把 padding、margin、space 與 gap 一次講透，並帶你理解 v4 由單一 --spacing 變數動態推導間距刻度的設計，以 v4 為預設、標註與 v3 的差異。

wrangler.jsonc 設定完整解析:必填欄位、bindings 與 observability | Cloudflare 完整教學

Wed, 12 Aug 2026 00:00:00 +0000

上一篇我們用 wrangler deploy 把 Worker 送上了邊緣,但那份決定 Worker 名稱、入口、綁定與相容性的 wrangler.jsonc,我們只匆匆帶過。這一篇,我們把這份設定檔從頭到尾徹底拆開——先講清楚 name、main、compatibility_date、compatibility_flags 四大核心欄位,再逐一示範 KV、R2、D1、Durable Objects、Queues、AI、vars 各種 binding 的宣告語法,接著帶你設定 routes、workers.dev、observability、assets、triggers、limits,最後比較 JSONC 與 TOML 的差異。讀完你就能隨心所欲地設定自己的 Worker。

TailwindCSS 定位系統：position、inset、z-index、sticky 完整指南 | TailwindCSS 完整教學

Tue, 11 Aug 2026 00:00:00 +0000

在 TailwindCSS 裡，定位系統（Positioning） 是讓元素「脫離正常文件流」、精準釘在畫面任意位置的關鍵工具——只要用 relative、absolute、fixed、sticky 決定定位模式，再用 top／right／bottom／left（或簡寫 inset-*）指定偏移、z-* 控制層疊順序，就能一組 utility 做出黏性導覽列、卡片徽章、下拉選單、彈窗遮罩這些過去得靠一整段 CSS 才能完成的疊層 UI。這是 TailwindCSS 完整教學 系列的第十一篇，我們會把 position 五種模式、inset 偏移、負值、z-index 與堆疊脈絡、以及 sticky 實務一次講透，並以 v4 為預設、標註與 v3 的差異。

Wrangler 入門:安裝、login、建專案、dev 與 deploy | Cloudflare 完整教學

Tue, 11 Aug 2026 00:00:00 +0000

前面十篇,我們把 Worker 這顆運算核心從裡到外拆了個透徹——但那些程式碼要怎麼真正「跑起來、上線」?靠的就是 Cloudflare 的官方命令列工具:Wrangler。這一篇是 CF-2 部署工具系列的開篇,我們從零帶你走一遍:如何安裝 Wrangler、用 wrangler login 登入帳號、用 npm create cloudflare(C3)建立專案、認識專案結構、用 wrangler dev 本地開發、用 wrangler deploy 一鍵部署到邊緣,再帶你熟悉 tail、whoami、versions 等常用指令,以及 Wrangler v3/v4 的版本差異。讀完這篇,你就能把前面學的一切,變成活生生跑在 Cloudflare 邊緣網路上的服務。

TailwindCSS Grid 完整指南：grid-cols、col-span、gap 二維版面一次搞懂 | TailwindCSS 完整教學

Mon, 10 Aug 2026 00:00:00 +0000

在 TailwindCSS 裡，Grid 是專為「二維版面」設計的排版引擎——只要對容器寫上 grid，再用 grid-cols-* 決定幾欄、grid-rows-* 決定幾列、col-span-* 讓子項跨欄、gap-* 拉開間距，就能一組 utility 搭出相簿網格、儀表板、複雜頁面骨架這些過去得寫一大段 CSS 才能完成的版面。這是 TailwindCSS 完整教學 系列的第十篇，我們會把整套 Grid 工具類從容器到子項、從隱式軌道到 v4 全新的 subgrid 一次講透，並以 v4 為預設、標註與 v3 的差異。

Workers Bindings 與 Node.js 相容:用 env 宣告式連接資源、nodejs_compat 用 node: 模組 | Cloudflare 完整教學

Mon, 10 Aug 2026 00:00:00 +0000

前九篇,我們反覆用 env 存取 KV、D1、Queue,把它當成理所當然——但這個把 Cloudflare 服務「注入」進 Worker 的機制,正是整個平台威力的核心。這一篇,我們正式拆解 Bindings:什麼是 Binding(在 wrangler.jsonc 宣告式連接資源,不用連線字串、不用金鑰)、env 物件怎麼運作、KV / R2 / D1 / Durable Objects / Queues / AI / Service / Secrets 各種 binding 的全貌、如何用 wrangler types 自動生成 Env interface 型別,以及開啟 nodejs_compat flag 後,哪些 node: 模組能用、哪些只是空殼。也徹底講清楚環境變數 vs Secrets vs Binding 的差別。這一篇同時為我們的 CF-1 運算核心收尾。

TailwindCSS Flexbox 完整指南：flex、justify、align、gap 一次搞定 | TailwindCSS 完整教學

Sun, 09 Aug 2026 00:00:00 +0000

在 TailwindCSS 裡，Flexbox 是最常用、也最值得先練熟的一維版面引擎——只要對容器寫上 flex，再搭配 justify-* 決定主軸怎麼分配、items-* 決定交軸怎麼對齊、gap-* 拉開間距、flex-1 讓子項等分空間，就能一組 utility 搞定置中、等分、換行這些每天都在寫的版面需求。這是 TailwindCSS 完整教學 系列的第九篇，我們會把整套 Flexbox 工具類從容器到子項一次講透，並以 v4 為預設、標註與 v3 的差異。

Workers Cron Triggers 排程:scheduled handler 與 cron 表達式實戰 | Cloudflare 完整教學

Sun, 09 Aug 2026 00:00:00 +0000

前幾篇我們的 Worker 都是「被動」的——有人送請求上門,fetch handler 才醒來做事。但真實世界有一大類任務是主動、定時的:每天凌晨清掉過期資料、每小時同步一次匯率、每五分鐘寄一批待發的通知。這種「不靠人觸發、時間到就自己跑」的能力,靠的就是 Cloudflare Workers 的 Cron Triggers。這一篇我們深入排程:在 wrangler.jsonc 的 triggers.crons 設定 cron 表達式、匯出 scheduled(event, env, ctx) handler、用 event.cron 與 scheduledTime 做多排程分流、以 wrangler dev --test-scheduled 在本地觸發測試,並講清楚 cron 為何一律吃 UTC、為何一定要用 ctx.waitUntil、以及長任務何時該交棒給 Queues 或 Workflows。

TailwindCSS Layout 與 Display：block、flex、grid、overflow、object-fit 全解析 | TailwindCSS 完整教學

Sat, 08 Aug 2026 00:00:00 +0000

在 TailwindCSS 裡，Layout 與 display 是版面的骨架——block、inline、flex、grid 決定元素怎麼排列，hidden 決定它出不出現，overflow 決定內容溢出時怎麼處理，object-fit 決定圖片如何填滿容器。這篇是 TailwindCSS 完整教學 系列的第八篇，也是版面章節（TW-3）的開場，我們會把這一整組「掌控排列方式」的工具類一次講透，並以 v4 為預設、標註每一項與 v3 的差異。

Workers WebSockets：WebSocketPair 與 101 升級實戰 | Cloudflare 完整教學

Sat, 08 Aug 2026 00:00:00 +0000

上一篇《Streams 串流處理》讓資料「一直往下推」，但那是單向的——伺服器推、客戶端只讀。當你需要雙方隨時互相說話，做真正的即時互動（聊天室、多人協作、線上遊戲、即時通知），就得換上 WebSocket 這把武器。這一篇我們深入 Cloudflare Workers 的 WebSocket：從 Upgrade: websocket 標頭與 101 升級握手、new WebSocketPair() 建立 client/server 一對連線、server.accept() 接受連線、到 message / close 事件的處理，親手寫一個雙向 echo 伺服器。也會講清楚為什麼無狀態的 Worker 撐不住多人廣播，該把棒子交給 Durable Objects。

TailwindCSS 排版與文字完整指南：font 字體、text 字級、leading 行高、tracking 字距、text-wrap 與 v4 text-shadow、line-clamp、truncate | TailwindCSS 完整教學

Fri, 07 Aug 2026 00:00:00 +0000

在 TailwindCSS 裡，排版（Typography）是你每天都會碰到的第一組工具類——字體、字級、行高、字距、字重、對齊、截斷，幾乎每個畫面元素都少不了。這篇是 TailwindCSS 完整教學 系列的第七篇，我們會把 font-*、text-*、leading-*、tracking-* 這些 text 工具類 一次講透，包含 v4 新增的 text-wrap 智慧換行與 text-shadow 文字陰影，並帶你用可執行的範例把設計系統的字級 Token 真正落到畫面上。

Workers Streams 串流處理：邊收邊送與 SSE 實戰 | Cloudflare 完整教學

Fri, 07 Aug 2026 00:00:00 +0000

在 Cloudflare Workers 中，當你要處理「很大」或「即時」的資料——代理一個上百 MB 的檔案、把 AI 模型逐字吐出的 token 即時推給前端——你不可能把整份資料塞進只有 128 MB 的記憶體。答案是 Streams（串流）：讓資料像水一樣一段段流過，邊接收邊回傳，記憶體裡任何時刻只留很小的一塊。這一篇我們深入 ReadableStream / WritableStream / TransformStream 三大元件、pipeThrough 與 pipeTo 的接管、背壓（backpressure） 的自動流量控制，以及怎麼用 SSE 做 LLM 串流輸出。

TailwindCSS v4 遷移指南：從 v3 升級的破壞性變更、@tailwindcss/upgrade 自動遷移與漸進策略完整教學 | TailwindCSS 完整教學

Thu, 06 Aug 2026 00:00:00 +0000

TailwindCSS v4 是一次根本性的架構重設計：設定從 JavaScript 搬進 CSS、核心引擎用 Rust 重寫、@tailwind 三行換成一行 @import，還有一整批 utility 被系統性重新命名。這些破壞性變更（breaking changes）讓從 v3 直接升級不是「換個版本號」那麼簡單。這篇是 TailwindCSS 完整教學 系列的第六篇，我們把前幾篇散落的 v3/v4 差異收攏起來，帶你走一遍完整的 v4 遷移 流程——從自動遷移工具 npx @tailwindcss/upgrade、逐項破壞性變更對照，到大型專案的漸進升級策略。

Workers Cache API：邊緣快取完整實作 | Cloudflare 完整教學

Thu, 06 Aug 2026 00:00:00 +0000

在 Cloudflare Workers 中，最迷人的效能武器之一就是 Cache API——它讓你把運算結果直接快取在離使用者最近的邊緣節點上，下一次同樣的請求進來，連運算和回源都省了，直接從邊緣秒回。這一篇我們深入 caches.default 的三個核心方法、快取鍵怎麼設計、TTL 怎麼用 Cache-Control 控制，以及為什麼 ctx.waitUntil 是「非同步寫快取」的最佳拍檔。

TailwindCSS 指令與函式全解析：@import、@layer、@apply、@utility 與 theme()/--alpha() 完整教學 | TailwindCSS 完整教學

Wed, 05 Aug 2026 00:00:00 +0000

在 TailwindCSS v4 裡，指令（directives）與函式（functions）是你在 CSS 檔案裡「動用」設計系統的工具箱。從一行 @import "tailwindcss" 載入整套框架，到用 @layer 控制優先級、@apply 提取 utility、@utility 定義自訂 utility、@custom-variant 造出新變體，再到 theme()、--alpha()、--spacing() 這些函式取用 Token——這篇是 TailwindCSS 完整教學 系列的第五篇，帶你一次看懂 v4 的指令與函式語彙，並標註它與 v3 的關鍵差異。

Workers Request 與 Response：處理 HTTP 請求與回應 | Cloudflare 完整教學

Wed, 05 Aug 2026 00:00:00 +0000

在 Cloudflare Workers 的世界裡，每一次請求最終都歸結為兩個物件:進來的 Request 與回去的 Response。這一篇我們深入 fetch handler 最核心的這兩個角色——請求進來長什麼樣、回應怎麼構造、Headers 與 Body 如何操作、如何依 path 與 method 路由，以及 request.cf 與 ctx.waitUntil 這兩個 Workers 專屬的實用工具。全部基於 Web 標準 API。

TailwindCSS 配置系統：@theme CSS-first 設定完整解析與 tailwind.config.js 遷移 | TailwindCSS 完整教學

Tue, 04 Aug 2026 00:00:00 +0000

在 TailwindCSS v4 裡，「配置」不再是一個獨立的 JavaScript 檔案，而是直接寫進你的 CSS。核心是 @theme 指令——你在裡面定義的每一個設計 Token，會同時變成一個 CSS 變數，並自動生成對應的 utility class。這是 TailwindCSS 完整教學 系列的第四篇，帶你看懂 @theme 如何運作、extend 擴充與覆寫的分界、常見設定項的命名空間規則，以及如何從 tailwind.config.js 的思維遷移過來。

Workers 定價與限制：CPU time 計費與省錢技巧 | Cloudflare 完整教學

Tue, 04 Aug 2026 00:00:00 +0000

Cloudflare Workers 的執行模型看懂了，接下來就要把它換算成兩件實際的事:要付多少錢、能做到哪裡為止。 這一篇我們把 Free 與 Paid 方案的請求數、CPU 時間、記憶體、bundle 大小、子請求數每一條線畫清楚，解釋 CPU time 計費為何只算運算、不算等待，並教你怎麼估成本、怎麼避開超限。

TailwindCSS 類別偵測機制：內容掃描、safelist 與動態 class 陷阱完整解析 | TailwindCSS 完整教學

Mon, 03 Aug 2026 00:00:00 +0000

TailwindCSS 最讓新手困惑的一件事，往往是「我明明寫了 class，樣式卻憑空消失」。答案藏在它的類別偵測（class detection）機制裡——Tailwind 靠的是內容掃描（content scanning），一種字串層級的搜尋，而不是執行你的程式碼。這是 TailwindCSS 完整教學 系列的第三篇，帶你看懂掃描器怎麼「讀」你的原始碼，並徹底避開 text-${color} 這類動態拼接的陷阱。

V8 Isolates 執行模型：Workers 為何近乎零冷啟動 | Cloudflare 完整教學

Mon, 03 Aug 2026 00:00:00 +0000

Cloudflare Workers 之所以能做到近乎零的冷啟動、驚人的部署密度，以及那些看似奇怪的行為限制，答案全都藏在一個核心設計裡——V8 Isolates。這一篇我們掀開引擎蓋，看懂 Isolate 到底是什麼、它憑什麼比容器快上百倍、多租戶如何安全共享同一個進程，以及為什麼你不能把模組層變數當狀態用。

TailwindCSS 架構與 Oxide 引擎：JIT、Rust 與 CSS 處理管線完整解析 | TailwindCSS 完整教學

Sun, 02 Aug 2026 00:00:00 +0000

TailwindCSS v4 最大的改變不在你寫的 class，而在你看不到的引擎。這篇文章帶你打開引擎蓋，看看以 Rust 重寫的 Oxide 引擎如何運作：它怎麼掃描你的原始碼、按需產生 CSS，又為什麼建構速度能比 v3 快上一個數量級。這是 TailwindCSS 完整教學 系列的第二篇，也是理解整個框架運作原理的關鍵。

第一個 Worker：從建立到部署上線 | Cloudflare 完整教學

Sun, 02 Aug 2026 00:00:00 +0000

上一篇我們鳥瞰了整片地圖，這一篇正式動手。我們會用 npm create cloudflare 建立專案，看懂 export default 裡的 fetch handler，用 wrangler dev 在本地跑起來，最後把你的第一個 Cloudflare Worker 部署到全球邊緣網路，並觀察每一個進來的 request。

Cloudflare 開發者平台總覽：邊緣運算與 Workers 入門 | Cloudflare 完整教學

Sat, 01 Aug 2026 00:00:00 +0000

這是 Cloudflare 完整教學系列的第一篇。在正式動手寫 Worker 之前，我們先鳥瞰整片地圖：什麼是邊緣運算（Edge Computing）、為什麼 Cloudflare Workers 值得你投入、V8 Isolates 如何做到近乎零的冷啟動，以及 Bindings 生態如何把 KV、R2、D1、Durable Objects、Queues 與 AI 串成一個完整的開發者平台。

Utility-First 是什麼？TailwindCSS 核心哲學完整解析 | TailwindCSS 完整教學

Sat, 01 Aug 2026 00:00:00 +0000

為什麼 TailwindCSS 要你在 HTML 裡塞一堆像 p-4、bg-white、rounded-lg 的小 class，而不是好好寫一個 .card？這篇文章帶你理解 Utility-First 這套核心哲學：它如何顛覆傳統的「關注點分離」，解決了哪些真實痛點，又付出了什麼代價。這是 TailwindCSS 完整教學 系列的第一篇，也是理解整個框架的思維起點。