---
title: "Overview"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Overview of Frutjam -a free CSS-only Tailwind CSS v4 component library with WCAG AA/AAA accessibility, zero JavaScript, and framework-agnostic design."
url: https://frutjam.com/zh-hant/docs/overview
---

# Getting Started with Frutjam

沒有複雜的設定 - 它使用與 Tailwind CSS 相同的配置，因此您可以堅持使用您已經知道的內容。如果您熟悉 Bootstrap，組件名稱會感覺直觀且易於記住。

您可以將 Tailwind CSS 變體前綴（如 `dark:`、`sm:`、`lg:`、`xl:`、`rtl:` 和 `ltr:` 與我們的任何實用程式類別一起使用。

## 採用速度優先框架的現代 UI 工程

Frutjam 是一個開源 Tailwind CSS v4 UI 庫 - 旨在促進快速 Web 開發的高級抽象。將其視為一個工具包，可將原始實用程式類別轉換為語義化、可用於生產的元件，從而使您能夠使用更少的程式碼建立現代介面。

## 它解決什麼問題？

大多數開發人員都面臨"效用疲勞"，花費大量時間為按鈕和輸入等基本元素編寫長長的類鏈。 Frutjam 透過提供"即插即用"生態系統消除了這種摩擦。

- **冗餘樣板**：您無需為每個項目重新發明輪子，而是可以獲得開箱即用的處理焦點狀態、懸停轉換和響應行為的預構建組件
- **效能膨脹**：與重型 JavaScript 框架不同，Frutjam 優先考慮「純 CSS」方法，確保您的應用程式保持輕量級和快速
- **合規障礙**：建立可存取且 SEO 友善的介面非常複雜。該庫使用語義標記和乾淨的 HTML 來確保您的網站本質上符合 W3C 標準

## 如果您符合以下條件，Frutjam 就適合您：

- 厭倦了重複編寫數千個實用程式類別名稱
- 需要在創紀錄的時間內交付可訪問、SEO 友好的登陸頁面和 SaaS 應用程式
- 想要一個在任何環境下都完全相容的一致設計系統嗎？
- 偏好輕量級、與框架無關的解決方案，強制 JavaScript 依賴項為零

## 快速開發的核心功能

該工具包遵循"複製、貼上和建造"理念，提供專業級前端工程所需的一切

- **廣泛的組件庫**：包括導覽列、模態框、手風琴和精煉資料表等基本元素
- **預組裝區塊**：使用定價部分、標題和英雄區域的佈局區塊節省時間
- **"Berry" 主題系統**：在 Snowberry（淺色）和 Darkberry（深色）等內建主題之間切換，或使用 OKLCH CSS 變數建立您自己的主題
- **輔助使用優先設計**：每個組件都遵循 ARIA 角色和鍵盤導航的最佳實踐。所有顏色對都是手動調整的 OKLCH 值，經驗證可透過 WCAG AA 對比度，而不是自動計算的猜測。
- **與框架無關**：無論您使用的是 React、Next.js、Vue、Django、HTMX、Laravel 還是簡單的靜態 HTML，都可以無縫運作

## 技術效率

與標準的實用程式優先工作流程相比，透過使用語義類別名稱，您可以顯著減小 HTML 大小。這會產生更乾淨、更易於維護的程式碼庫，從長遠來看，團隊更容易管理。該程式庫嚴格建立在 Tailwind CSS 之上，確保您保留實用程式引擎的所有自訂功能，同時獲得基於元件的系統的速度。

準備好開始了嗎？ [開始安裝 →](/zh-hant/docs/installation)