安裝

• 安裝 Konsta UI
• 新增設定
• Roboto 字體
• 用法

我們假設您已經有一個配置好的專案，其中包含 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 將會使用 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');

用法

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