カラーバリエーション、ソフトスタイル、取り外し可能なボタンを備えた CSS のみの Tailwind CSS タグ (チップ)。サイズはXS〜LG。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
タグ コンポーネントは、コンテンツの分類、フィルタリング、またはラベル付けに使用される、ラベル付きの小さな情報を表示します。セマンティック HTML と柔軟なスタイルで構築されたタグは、ユーザーがコンテンツ タイプ、ステータス、カテゴリをすばやく識別するのに役立ちます。 Frutjam タグ システムは、複数のサイズ、色、スタイル、形状をサポートしており、スキル リスト、記事カテゴリ、ステータス ラベル、コンテンツ メタデータに最適です。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| tag | ベース | Inline label for categorizing or identifying content |
| tag-outline | スタイル | 色付きの境界線を持つ透明な塗りつぶし |
| tag-soft | スタイル | 落ち着いた色合いの背景 |
| tag-square | スタイル | Slight rounding (less than default pill) |
| tag-remove | 修飾子 | Dismiss/remove button inside the tag |
| tag-xs | サイズ | Extra small (0.6875rem font) |
| tag-sm | サイズ | Small (0.75rem font) |
| tag-md | サイズ | Medium (0.8125rem font, default) |
| tag-lg | サイズ | Large (0.9375rem font) |
| tag-xl | サイズ | Extra large (1rem font) |
| tag-primary | 色 | 主要なテーマカラー |
| tag-secondary | 色 | 二次テーマカラー |
| tag-accent | 色 | アクセントのテーマカラー |
| tag-neutral | 色 | ニュートラルなテーマカラー |
| tag-info | 色 | 情報セマンティックカラー |
| tag-success | 色 | 成功のセマンティックカラー |
| tag-warning | 色 | 警告セマンティックカラー |
| tag-error | 色 | エラー セマンティック カラー |
基本的な使い方
Tag
Another tag
Third tag
1 2 3 | <div class="tag">Tag</div> <div class="tag">Another tag</div> <div class="tag">Third tag</div> |
1 2 3 | <div className="tag">Tag</div> <div className="tag">Another tag</div> <div className="tag">Third tag</div> |
Tag Sizes
Extra Small
Small
Medium
Large
html
1 2 3 4 | <div class="tag tag-xs">Extra Small</div> <div class="tag tag-sm">Small</div> <div class="tag tag-md">Medium</div> <div class="tag tag-lg">Large</div> |
Tag Colors
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 | <div class="tag">Default</div> <div class="tag tag-primary">Primary</div> <div class="tag tag-secondary">Secondary</div> <div class="tag tag-accent">Accent</div> <div class="tag tag-info">Info</div> <div class="tag tag-success">Success</div> <div class="tag tag-warning">Warning</div> <div class="tag tag-error">Error</div> |
Tag Styles
Default
Outline
Soft
Dashed
html
1 2 3 4 | <div class="tag tag-primary">Default</div> <div class="tag tag-primary tag-outline">Outline</div> <div class="tag tag-secondary tag-soft">Soft</div> <div class="tag tag-accent tag-dashed">Dashed</div> |
Tag Shapes
Square
Rounded
Pill
C
html
1 2 3 4 | <div class="tag">Square</div> <div class="tag tag-rounded">Rounded</div> <div class="tag tag-pill">Pill</div> <div class="tag tag-circle">C</div> |
Tag with Icon
Starred
html
1 2 3 4 | <div class="tag tag-primary"> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg> Starred </div> |
Closeable Tags
JavaScript
React
TypeScript
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="tag tag-primary"> JavaScript <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-secondary"> React <button class="tag-remove" aria-label="Close">×</button> </div> <div class="tag tag-accent"> TypeScript <button class="tag-remove" aria-label="Close">×</button> </div> |
Tag List
JavaScript
React
CSS
UI Design
Frontend
Production
html
1 2 3 4 5 6 7 8 | <div class="flex flex-wrap gap-2"> <div class="tag">JavaScript</div> <div class="tag tag-primary">React</div> <div class="tag tag-secondary">CSS</div> <div class="tag tag-accent">UI Design</div> <div class="tag tag-info">Frontend</div> <div class="tag tag-success">Production</div> </div> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な タグ クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。