Get started

Varvara CSS is implemented using simple class names and easily customizable with CSS Variables.

You can use it alongside Tailwind CSS and with any JavaScript framework.

Install

CDN

The easiest way to use Varvara CSS is through a CDN:

@import url('https://unpkg.com/varvara-css');

Alternatively, add this line to the head tag of your HTML:

<link
  href="https://unpkg.com/varvara-css"
  rel="stylesheet"
  type="text/css"
/>

You’ll have access to both variables and components from the same import.

NPM

Another option is to add Varvara CSS to your own build process:

npm i varvara-css

After, you have to import the package into your stylesheet:

@import 'varvara-css/css';

An @import rule must be defined at the top of the stylesheet

With both options, you have the ability to customize the components using CSS variables.

Tailwind Plugin

Finally, you can extend Tailwind CSS with Varvara CSS.

Install Varvara CSS via NPM:

npm i varvara-css

Make sure Tailwind CSS is also installed.

Next, modify your tailwind.config.js file to include the Varvara CSS plugin:

import varvara from 'varvara-css'

module.exports = {
plugins: [varvara],
// ...
}

Your Tailwind setup is now extended with Varvara CSS, ready to use its variables and components in your project.

Use

Once installed Varvara CSS, copy and paste components classes to get started.

Simply add a component class like this:

<button class="va-button">Example button</button>

Customize

Each component already has its own CSS variables, with basic properties such as padding, background color, border, etc… You can modify to customize it.

--va-button-font-size: var(--va-font-size-2);
--va-button-padding: var(--va-space-3);
--va-button-border-width: var(--va-border-width);
--va-button-border-color: var(--va-border-color);
--va-button-background-color: var(--va-surface-primary);

Also you can override the styles if you prefer:

.va-button {
  font-family: 'Rubik Variable', sans-serif;
}