インストール

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

プロジェクトに既にSvelteとTailwind CSSが設定されていると想定されています。

Konsta UI のインストール

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

npm i konsta

設定の追加

次に、Konsta UI 設定を使用して Tailwind CSS 設定を拡張する必要があります。

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 は、Konsta UI に必要な追加の変種とヘルパーユーティリティを使用して、（またはカスタムの）デフォルトの Tailwind CSS 設定を拡張します。

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');

使用方法

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