インストール

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

VueとTailwind CSSが既に設定されたプロジェクトがあることを前提としています。Vueと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は、デフォルト（またはカスタム）のTailwind CSS設定を、Konsta UIに必要ないくつかの追加のバリアントとヘルパーユーティリティで拡張します。

Robotoフォント

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

ウェブアプリを開発する場合は、正しく表示するためにアプリに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');

使用方法

インストールが完了したら、VueアプリケーションでKonsta UIコンポーネントをどのように使用するのかを確認しましょう。