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

Tailwind CSS

To use Varvara CSS with Tailwind CSS, first install the package:

Make sure Tailwind CSS is already configured in your project.

Tailwind CSS v4

Register the plugin in your main stylesheet:

Tailwind CSS v3

Add the plugin to your tailwind.config.js:

NPM

You can also integrate Varvara CSS into your own CSS build process.

Install the package:

Then import it into your stylesheet:

[!TIP] An @import rule must be defined at the top of the stylesheet

CDN

For quick setups, you can load Varvara CSS directly from a CDN:

Or include it in your HTML:

Both methods include all CSS variables and components.

Use

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

Simply add a component class like this:

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.

Also you can override the styles if you prefer: