インストール

• Konsta UIのインストール
• 設定の追加
• Robotoフォント
• 使用方法

ReactとTailwind CSS が設定済みのプロジェクトが既にあることを前提としています。

Konsta UIのインストール

まず、Konsta UIライブラリをインストールする必要があります。

npm i konsta

設定の追加

次に、Tailwind CSSの設定をKonsta UIの設定で拡張する必要があります。

tailwind.config.js ファイルに

const konstaConfig = require('konsta/config');

// wrap your config with konstaConfig
module.exports = konstaConfig({
  // rest of your usual Tailwind CSS config here
  ...
});

konstaConfig は、デフォルト（またはカスタム）のTailwind CSS設定を、Konsta UIに必要な追加のバリアントとヘルパーユーティリティで拡張します。

Robotoフォント

Konsta UIは、iOSテーマにはシステムフォントを、マテリアルデザインテーマにはRobotoフォントを使用します。

Webアプリを開発する場合は、正しく表示するためにRobotoフォントをアプリに追加する必要があります。

たとえば、Google Fontsから追加できます。

HTMLの場合

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>

CSSの場合

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

使用方法

インストールプロセスが完了したら、Konsta UIコンポーネントをReactアプリケーションで使用する方法を確認しましょう。