安装

• 安装 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 组件。