安裝

• 安裝 Konsta UI
• 新增設定
• Roboto 字體
• 使用方式

我們假設您已經有一個設定好的專案，包含 React 和 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 字體 作為 Material Design 主題。

如果您開發的是 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');

使用方式

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