網路資源
Tailwind Awesome：收錄眾多優秀Tailwind模板與UI套件的網站
Tailwind Awesome 是一個專門提供高品質Tailwind CSS模板和UI套件的線上資源庫。該平台匯聚了眾多設計精美的模板，涵蓋了從SaaS、創業公司Landing Page到個人作品集等多種用途。此外，用戶還可以按網站技術如React、Vue.js等過濾搜尋結果，或從價錢排序收錄的模板。
網路資源
教學與資訊
網站加速：使用rel=preload as=style 優化CSS文件下載
本文將介紹如何透過使用rel=preload as=style 的方法優化CSS文件下載，實現網站加速。
網路資源
Transform.tools：開發者的格式轉換神器，簡化你的開發流程
Transform.tools 是一個強大的開發者工具，允許用戶將各種編碼和格式文件轉換成另外的格式，如 SVG 轉 JSX、HTML 轉 JSX、JSON 轉 TypeScript 等。此平台支援廣泛的轉換選項，包括 JSON、JSON Schema、CSS、JavaScript、GraphQL、JSON-LD、TypeScript、Flow 等以及更多其他格式。這是一個為開發者設計的一站式解決方案，提供靈活的轉換選擇，以滿足不同的開發需求。
網路資源
Toggles.dev：開源的生動 Dark Mode 切換按鈕，可以直接修改並複製程式碼回去使用
Toggles.dev是一個專門提供動態主題切換按鈕的網站，尤其是在淺色模式與深色模式之間的轉換。此平台匯集了一系列既美觀又易於使用的動畫切換按鈕，特別適合搭配如TailwindCSS這類的工具 CSS 框架使用。
網路資源
Shipixen：專業定價頁面產生器，支援 React、Vue.js 以及 Tailwind CSS
Shipixen 提供一款靈活的定價頁面產生器，你可以依據你的需求並透過介面上的設定，就能做出專業的產品定價頁面的 UI，支援 Next.js/React、Vue、Shadcn UI 與 Tailwind CSS。
網路資源
Locofy：AI 一鍵將 Figma 或 Adobe XD 設計稿轉為前端程式碼
Locofy是一款專門為前端開發者打造的AI工具，推出了一項名為Lightning的產品，這項工具能夠一鍵將Figma設計轉換成前端程式碼，支援把Figma和AdobeXD的原型設計轉換成適合手機應用程式和網頁的生產級前端程式碼。透過善用現有的設計工具、技術堆疊和工作流程，Locofy能讓產品快速上市的速度提高5到10倍，進而大幅提升生產力和效率。Lightning是基於該平台的大型設計模型（LDM）開發的產品，其靈感來自於OpenAI首創的法學碩士概念。
網路資源
掌握專業程式技能：GoalKicker.com免費學習資源大全
GoalKicker.com是一個為程式設計師提供大量免費專業書籍的平台。這些書籍覆蓋了廣泛的程式語言和技術主題，包含.NET Framework、Android、Python、Java、AngularJS、CSS、Git、iOS、C、C++、C#、Hibernate、HTML、HTML5 Canvas、jQuery、Kotlin、Linux、MySQL、MATLAB、MongoDB、Node.js、Oracle Database、Perl、PHP、PostgreSQL、R、React JS、React Native、Ruby、Ruby on Rails、Spring Freamework、S
網路資源
[WordPress Plugin] WPCode：方便的程式碼管理外掛，可方便的撰寫及管理 PHP、JS、CSS、HTML 等相關程式碼
WPCode 是一款專為 WordPress 使用者設計的程式碼片段外掛，它提供了一個易於使用且功能強大的平台，讓用戶可以輕鬆地添加自定義 WordPress 功能，而無需依賴過多的外掛。WPCode 擁有超過 100+ 專家核准的現成程式碼片段資料庫，支援自定義 PHP、JS、CSS、HTML、純文字等類型的程式碼片段。此外，它還具備智慧條件邏輯、先進的自動插入位置選項、網站的 Header 與 Footer 程式碼添加功能、安全的錯誤處理機制，以及電子商務轉換像素等特色。
網路資源
Aceternity UI：豐富的網站前端動態效果元件庫
Aceternity UI 提供一套專為網站開發者打造的前端元件庫，例如3D卡片效果、星光背景、動態漸變背景等，讓使用者能輕鬆將最新趨勢的網頁元件直接複製、貼上到自己的專案中。它支援多種框架與技術，如 Next.js、React、TailwindCSS 和 Framer Motion，確保在不同開發環境中都能快速應用這些美觀的介面設計。Aceternity UI 讓設計與開發變得更高效，無需繁瑣的樣式調整，適合任何想快速提升網站外觀的開發者。
網路資源
Animotion- Visual CSS Animation Builder：讓 CSS 動畫創建更直觀的視覺化工具
Animotion 是一個免費的網頁應用程式，允許使用者透過拖拽、調整大小、旋轉、剪裁等視覺化操作來創建 CSS 動畫。它包含關鍵幀編輯器、一系列現成可用的動畫和29種內建的緩動效果。Animotion 在近期更新中加入了新外觀、鍵盤快捷鍵、多層顯示、自定義元素尺寸、平移和縮放功能，以及對關鍵幀、多重緩動效果、WYSIWYG 預覽模式、工具提示、程式碼優化、變形吸附、鍵盤快捷鍵、新域名、撤銷/重做、GitHub 暗色主題、關鍵幀自動化、深色模式、動畫庫和編輯動畫按鈕的改進。Animotion 支援大螢幕和現代網頁瀏覽器，適合需要視覺化創建 CSS 動畫的開發者使用。
網路資源
Fffuel：免費 SVG 圖樣生成器與色彩工具
Fffuel 提供 60 多種免費 SVG 生成器與色彩工具，讓設計師輕鬆創建漸變、圖案、紋理與形狀，並支援高品質 SVG/PDF 輸出，適用於各類設計專案，提升創作效率。
網路資源
[VS Code Extension] CSS Peek：快速在 HTML 查看 CSS 樣式
VS Code 上的 CSS Peek 擴充功能可讓您快速查看 HTML 中分配的各種class名稱和 ID 的 CSS 樣式定義。
網路資源
UI Colors - 專為設計師和開發者打造的創新顏色生成器
UI Colors是一個專門為設計師和開發者提供顏色生成和編輯工具的網站。用戶可以透過按空白鍵、輸入色碼或改變HSL值來創建自定義的顏色比例。此外，網站也支援Google帳號登入，方便用戶保存和編輯自己的顏色比例。UI Colors還提供一個Figma外掛，增強其實用性和便利性 。
網路資源
Uiverse：可直接複製的前端 UI 元件庫，快速打造吸睛互動介面
Uiverse 是一個提供可複製 HTML、CSS（含 Tailwind）UI 元件的平台，涵蓋按鈕、卡片與動畫效果，支援即時預覽與社群分享，幫助開發者快速打造互動介面。
網路資源
CSSBattle：透過競賽讓開發者更加熟悉 CSS 開發的平台
CSSBattle 是一個旨在幫助網頁開發人員提高 CSS 技能的網站。CSSBattle 通過提供一個競賽平台，讓開發人員可以展示自己的 CSS 技能，並與其他開發人員進行交流和學習。
教學與資訊
讓 CSS 更好維護的模組化方法：OOCSS、SMACSS 和 BEM
當我們在撰寫 CSS 時，都會需要考慮的之後的維護方便度或可擴充性，於是就有 CSS 模組化的觀念產生，而這些又大致可以分為 OOCSS、SMACSS 和 BEM 幾種類別，本篇就以這幾類來做說明。
網路資源
Anima：將 Figma 設計稿轉成 HTML、CSS與 javascript，優化設計與開發的全新體驗
在現今的軟體開發領域中，設計和開發之間的協同工作變得越來越重要。Anima是一個強大的工具，旨在幫助您更有效率地取得程式碼，並根據您的設計迅速進行整個設計到開發的流程。
網路資源
CSS Genius：透過 AI 生成 Tailwind UI 元件
CSS Genius 是一款令人驚嘆的工具，它利用人工智慧技術，輕鬆為您的應用程式創建漂亮的 UI 元件。透過 CSS Genius，您可以設計元件並根據您的喜好進行樣式設定，而無需編寫任何程式碼，只需使用簡單的文字提示。您可以預覽這些元件，然後通過文字對其進行更新。