This guide takes you from an empty file to a styled, responsive card in five minutes with Nakshora 3.0.

Step 1 — Get the framework#

Install the Vite plugin and register it:

terminal
bash
npm install -D @nakshora/vite-plugin
vite.config.js
js
import { defineConfig } from 'vite';
import { nakshora } from '@nakshora/vite-plugin';

export default defineConfig({
  plugins: [
    nakshora({
      content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'], // JIT scanning
    }),
  ],
});
js
// src/main.js — the virtual module resolves to your compiled CSS
import 'nakshora';

Step 2 — Compose your first UI#

Every visual decision is a class. Copy this card into your project:

index.html
html
<div class="max-w-sm mx-auto mt-16 glass p-6 rounded-xl shadow-lg">
  <h2 class="text-lg font-bold text-slate-900 dark:text-white">Nakshora</h2>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    Utility-first styling, zero ceremony.
  </p>
  <button class="mt-4 px-5 py-2.5 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 active:scale-95 transition shadow-md">
    Get started
  </button>
</div>

Step 3 — Make it responsive#

Prefix any utility with a screen to apply it from that breakpoint up. Nakshora 3.0 ships 4 screens (sm:, md:, lg:, xl:):

html
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- one column on phones, two on large phones, four on laptops+ -->
</div>

Next steps#

InstallationEvery way to add Nakshora to a project.Utility-first methodologyThink in utilities.Utilities referenceEvery class, documented.