Mantine × Tailwind CSS 統合デモ

Tailwind v4 の @theme inline を使って Mantine の CSS 変数を Tailwind クラスとして使用

Mantine Dates コンポーネント

DatePicker

MoTuWeThFrSaSu

DateInput

DateTimePicker

TimeInput

カラーパレット統合

Primary 0
Primary 2
Primary 4
Primary 6
Primary 8
Gray 1
Gray 3
Gray 5
Gray 7
Gray 9

タイポグラフィ統合

Extra Small Text (Mantine xs) - Light Weight
Small Text (Mantine sm) - Normal Weight
Medium Text (Mantine md) - Medium Weight
Large Text (Mantine lg) - Semibold Weight
Extra Large Text (Mantine xl) - Bold Weight

シャドウ & ボーダーラジウス

Shadow XS
Radius XS
Shadow SM
Radius SM
Shadow MD
Radius MD
Shadow LG
Radius LG
Shadow XL
Radius XL

Mantine コンポーネント + Tailwind スタイル

Badge with Tailwind

レスポンシブデザイン

1 Column on XS

2 Columns on SM+

3 Columns on MD+

4 Columns on LG+

使用可能な Tailwind クラス & Mantine パッケージ

カラー: bg-mantine-primary-{0-9}, text-mantine-gray-{0-9}

フォントサイズ: text-mantine-{xs|sm|md|lg|xl}

フォントウェイト: font-mantine-{light|normal|medium|semibold|bold}

ボーダーラジウス: rounded-mantine-{xs|sm|md|lg|xl}

シャドウ: shadow-mantine-{xs|sm|md|lg|xl}

ブレークポイント: mantine-{xs|sm|md|lg|xl}:*

Dates: DatePicker, DateTimePicker, DateInput, TimeInput