We assume you already have a configured project with Vue and Tailwind CSS .
At first, we need to install the Konsta UI library:
npm i konsta
Then, we need to extend our Tailwind CSS config with Konsta UI config.
In your tailwind.config.js
file:
const konstaConfig = require('konsta/config');
// wrap your config with konstaConfig
module.exports = konstaConfig({
// rest of your usual Tailwind CSS config here
...
});
konstaConfig
will extend default (or your custom one) Tailwind CSS config with some extra variants and helper utilities required for Konsta UI.
Konsta UI uses system font for iOS theme and Roboto font for Material Design theme.
If you develop a web app, you need to Roboto font to your app to display it correctly.
For example, it can be added from Google Fonts:
In 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"
/>
Or in 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');
After installation process is done let's check how to use Konsta UI components in our Vue application.