cloudensisdesign system

cloudensis design system

cloudensis の CSS トークン・記事用スタイル・Hono JSX コンポーネントです。

導入

Tailwind CSS v4 と Hono v4 が必要です。

npm install @cloudensis/design-system

Tailwind CSS のエントリで index.css を読み込みます。

@import "tailwindcss";
@import "@cloudensis/design-system/index.css";

index.css にはフォント・色・タイポグラフィ・body とフォーカス枠の既定のスタイル・記事用スタイルと、コンポーネントのクラスの収集設定が含まれます。

コンポーネントはファイルごとに import します。

import { Button } from "@cloudensis/design-system/components/button";