Tailwind CSS v4 — What Actually Changed (And What It Means for Your Next.js Project)
Dev.to · 2026-04-21
架構從 JavaScript 配置轉向 CSS 優先
Tailwind CSS v4 帶來了根本性的架構轉變：整個設計系統從 JavaScript 配置遷移到 CSS 中。顏色現在以 CSS 自定義屬性（custom properties）形式存在，而非靜態十六進制值，開發者可在 DevTools 即時查看與修改，並能在執行時動態調整。
@theme 指令取代 theme.extend
v4 用新的 @theme 指令替代了舊有的 theme.extend 方法。開發者以特定前綴定義 CSS 變數（--color-*、--spacing-*），Tailwind 自動生成對應的 utility class，設計系統管理更直觀。新採用的 oklch 色彩空間提供比傳統 hex 更均勻的感知色彩分佈。
編譯效能大幅提升
v4 的編譯性能是 v3 的數倍：
- 完整構建：35ms（v4）vs 180ms（v3），提升約 5 倍
- 增量/HMR：<1ms（v4）vs 50-100ms（v3）
這對大型專案的開發工作流程改善明顯，特別是搭配 HMR 時近乎即時的反饋。
新增重要 Utilities
field-sizing-content：表單元素自適應尺寸not-*變體：選擇器反轉- 原生
@container支援，無需插件 starting動畫狀態，更精細的動畫控制
遷移路徑
官方提供 @tailwindcss/upgrade codemod 工具自動處理大多數轉換任務。中等規模專案遷移約需 30–60 分鐘。
Building a Zero-Backend Noise Pollution Map with MapLibre, PMTiles, and OpenStreetMap
Dev.to · 2026-04-21
零後端架構：全部在瀏覽器端執行
此專案採用極簡堆疊：nginx 服務靜態檔案 → MapLibre GL JS → PMTiles，所有處理邏輯全在瀏覽器端執行，完全不需要後端服務。PMTiles 協定透過 HTTP Range 請求按需拉取向量瓦片，消除了傳統圖磚服務的伺服器成本。
向量瓦片的瀏覽器端解析
使用 @mapbox/vector-tile 函式庫配合 Protocol Buffer 格式在瀏覽器解碼瓦片，無需伺服器端處理即可提取特定座標的噪音屬性，實現真正的零伺服器往返延遲。
聲學正確的混合演算法
聲音疊加不是簡單最大值，而是對數組合：兩個相等音源並非音量加倍，而是增加 3dB。計算公式：10 · log₁₀(Σ 10^(x/10))，確保地圖數值準確反映真實感知。
視覺化技術
採用簽名距離衰減（signed-distance decay）實現柔和多邊形邊界，以及填充下方的模糊線條光暈實現平滑漸變。機場噪音以參數化幾何從 OSM 跑道數據生成對齊的波瓣，而非簡單同心圓，更貼近飛機起降時的實際噪音分佈。
此案例展示了「客戶端渲染 + 靜態托管」架構的邊界：600MB OSM 資料全部以 PMTiles 靜態托管，零後端成本，卻能提供完整的互動式地圖體驗。
來源：Dev.to