跳至主內容
Mimosa

Design system · documentation first

Mimosa Design System

是一套基於 Tailwind v4 的 Design System,在 Tailwind utilities 之上加入 CSS Tokens、品牌化樣式與元件 ,讓專案能快速建立一致、可重用的產品介面。

Quick start 快速開始 npm
npm install mimosa-design-system tailwindcss

import "mimosa-design-system/tailwind.css";

Package 樣式載入方式

Mimosa 提供多種載入方式,可依專案需求選擇。

建議在專案中啟用 Tailwind v4,並透過 tailwind.css 載入完整 Design System。

各入口用途

入口 內容 適合使用情境
tailwind.css(預設入口) 包含 Tokens、Tailwind layer 與 Mimosa 元件樣式 一般 Web App 專案
tokens.css 僅包含 --psy-* CSS Tokens 只需要 Design Tokens 的專案
tokens.json 提供給 JavaScript 或工具讀取的 Token 資料 設計工具、文件生成、自動化流程

文件導覽

完整的 Design Tokens、元件樣式與使用規範,皆整理於 Mimosa 文件中。