# I built a sub-4ms JIT CSS framework with native Glassmorphism and built-in LLM training files

> Source: <https://dev.to/debatesylhetbd/i-built-a-sub-4ms-jit-css-framework-with-native-glassmorphism-and-built-in-llm-training-files-3aah>
> Published: 2026-09-14 07:03:33+00:00

If you've been doing frontend development lately, you already know the utility-first workflow is incredibly productive. But I kept running into two major friction points:

- Complex design trends require too much markup: Building a proper Glassmorphism or Brutalist UI with standard utilities means stacking 15+ classes just to get the backdrop blur and borders right.
- AI assistants hallucinate custom classes: When I use Copilot or ChatGPT to help write my UI, they constantly guess the wrong utility names or generate bloated, non-standard CSS.
To solve this, I built Nakshora — a modern, ultra-fast CSS framework with a JIT compiler designed from the ground up for the AI era.
What makes it different?
- Zero Runtime, Sub-4ms JIT: The engine parses your files and generates the exact CSS you need in ~4 milliseconds. A typical project outputs around 15KB of minified CSS.
- First-Class Design Components: Instead of fighting with utilities to create a neon card, you just use .neon-card. Nakshora ships with Glassmorphism, Brutalism, and Minimalism built directly into the utility engine.
- It actually trains your AI: This is the feature I'm most proud of. Nakshora ships with an llms.txt file, a structured ai/corpus.json, and an SFT dataset. You can feed this directly to your LLM of choice, and it will instantly know exactly how to write perfect Nakshora markup without hallucinating.
Quick Start with Vite:
npm install -D @nakshora/vite-plugin

// vite.config.js

import { defineConfig } from 'vite';

import { nakshora } from '@nakshora/vite-plugin';

export default defineConfig({

  plugins: [nakshora({ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'] })],

});

I’ve open-sourced the whole monorepo under MIT. Check out the docs at nakshora.bsdc.info.bd or drop a star on GitHub if you find it useful. I’d love to hear your feedback on the architecture!

Reddit (r/webdev or r/javascript - "Showoff Saturday")

Title: Show r/webdev: Nakshora - A utility-first CSS framework with built-in LLM training data and native UI components.

Hey everyone,

I’ve spent the last few months engineering a new utility-first CSS framework called Nakshora. I love existing tools, but I wanted something that handled complex, modern design aesthetics out of the box without requiring massive configuration files or external component libraries.

The TL;DR:

- Speed: Custom JIT compiler built in TypeScript. Compiles 3,000+ utilities in ~4ms.
- Output: Zero runtime JS. Pure, KB-sized CSS.
- Built-in Aesthetics: It includes single-class helpers for things like Glassmorphism (.glass), Neon Cyber (.neon-text), and Brutalism.
- AI-Ready: To stop AI coding assistants from hallucinating classes, I engineered the framework to generate its own machine-readable training assets (llms.txt, corpus.json). You can drop these into your AI context, and it instantly knows the framework's entire API.
It has a Vite plugin with HMR, a PostCSS plugin, and a standalone CLI.
Here is a quick look at the markup:
### GlassmorphismNEON CYBER

Links:

- GitHub: [https://github.com/nakshora/nakshora](https://github.com/nakshora/nakshora)
- Docs: [https://nakshora.bsdc.info.bd](https://nakshora.bsdc.info.bd) I'm currently looking for feedback on the Vite integration and the JIT performance on larger codebases. Happy to answer any questions about how the compiler works under the hood!
Hacker News (Show HN)
Title: Show HN: Nakshora – Sub-4ms JIT CSS framework with built-in LLM training datasets
I built Nakshora to address a specific gap in modern frontend tooling: the friction between utility-first CSS, modern design trends, and AI code generation.
The core is a zero-dependency JIT engine that parses HTML/JS/TSX and compiles only the used classes from a 3,091-utility catalog in ~4ms.
Two architectural choices stand out:
- First-class component utilities: Rather than forcing developers to combine 10+ granular utilities for common UI patterns, the engine natively resolves classes like .glass or .brutalist-card while still allowing granular overrides (hover:bg-blue-600).
- Deterministic AI Context: Instead of hoping Copilot guesses your utility names, the framework's build step automatically exports llms.txt, an SFT JSONL dataset, and a structured corpus. By feeding these to your AI agent, it achieves zero-shot accuracy on Nakshora syntax.
It integrates via Vite (virtual module + HMR), PostCSS, or CLI. The output is pure CSS with zero runtime JavaScript.
Repo: [https://github.com/nakshora/nakshora](https://github.com/nakshora/nakshora) Docs:[https://nakshora.bsdc.info.bd](https://nakshora.bsdc.info.bd) Stack Overflow (Strategic Answering)
Crucial rule for Stack Overflow: You cannot post promotional announcements or "recommendations" as questions. You will get banned for spam. Instead, you must find people asking how to solve specific UI problems (e.g., "How to create a glassmorphism card with CSS", or "Vite CSS framework fast compile times") and answer them directly, while strictly disclosing your affiliation.
Example Answer Template:
> To achieve a clean Glassmorphism effect with responsive behavior, you need a combination of backdrop-filter, background-color with opacity, and a subtle border.
> You can write this in vanilla CSS like so:
> .glass-card {
>   background: rgba(255, 255, 255, 0.1);
>   backdrop-filter: blur(10px);
>   border: 1px solid rgba(255, 255, 255, 0.2);
>   border-radius: 0.75rem;
> }
> 
> Disclaimer: I am the author of a tool that solves this. If you are using a utility-first approach and want this handled automatically without writing custom CSS, I recently built Nakshora (a JIT CSS framework). It has a built-in .glass component class that compiles down to highly optimized CSS specifically for this effect.
> Using it looks like this:
> 
>   Your content here
> 
> 
> You can see the exact CSS output and configuration options in the Nakshora documentation.
>
