安裝

• 安裝 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 主題中使用系統字體，在 Material Design 主題中使用 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');

使用方式

安裝過程完成後，讓我們檢查一下如何在我們的 Svelte 應用程式中使用 Konsta UI 元件。