VidaCSS

A Tailwind-like utility-first CSS library with hover:, md:, dark:, and JIT-style class compilation.

Install

npm install vida-css

CDN (Tailwind-like)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vida-css@latest/dist/vida.css" />

Local install

<link rel="stylesheet" href="node_modules/vida-css/dist/vida.css" />

Framework import

import "vida-css/dist/vida.css";

Class syntax (Tailwind-style)

Responsive:

<div class="md:w-96 w-10">...</div>

Pseudo-classes:

<button class="disabled:bg-red-500 hover:bg-blue-500">...</button>
<a class="visited:text-white hover:text-yellow-500" href="#">...</a>

Dark mode (class-based):

<div class="dark">
  <div class="dark:bg-blue-500">...</div>
</div>

Arbitrary values:

<div class="w-[300px] h-[100px] bg-red-500"></div>

Pseudo-elements (with arbitrary content):

<div class="relative overflow-hidden before:content-[''] before:absolute before:top-0 before:left-0 before:w-10 before:h-10 before:bg-red-500 before:rounded-sm"></div>

Build output

npm run build generates dist/vida.css (the file used by npm and the CDN link).