# NUI CSS **The next-generation JIT utility CSS engine. Blazing fast, zero-configuration out of the box, and perfectly compliant with modern web standards.**

Documentation License NPM Version

--- ## Overview NUI CSS provides a highly optimized **Just-In-Time (JIT) compiler**. By reading your source files, it compiles exactly the CSS you need—and absolutely nothing more—in milliseconds. * **Semantic Tokens:** Built-in shortcuts for scalable UI design (`.bg-surface`, `.text-muted`, `.border-subtle`). * **Zero-Config by Default:** Drop it into Vite, PostCSS, or a ` ``` ### 2. Vite (Recommended for SPAs) NUI CSS integrates perfectly into Vite for HMR and instant class generation. ```ts // vite.config.ts import { defineConfig } from 'vite'; import { nuicssVitePlugin } from '@nofinite/nuicss'; export default defineConfig({ plugins: [ nuicssVitePlugin() ], }); ``` Import the CSS engine into your application's root entry file (e.g., `main.tsx` or `App.tsx`): ```tsx // main.tsx import '@nofinite/nuicss/styles.css'; import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; ReactDOM.createRoot(document.getElementById('root')!).render(); ``` ### 3. PostCSS If you aren't using Vite, NUI CSS operates as a standard PostCSS plugin. ```js // postcss.config.js import nuicssPostcss from '@nofinite/nuicss/postcss'; export default { plugins: [ nuicssPostcss() ] }; ``` Import the CSS engine in your main CSS file: ```css /* index.css */ @import '@nofinite/nuicss/styles.css'; ``` --- ## Configuration & Extensibility NUI CSS works instantly out of the box, but you can heavily customize the engine by creating a `nuicss.config.ts` (or `.js`) file in your project root. ```ts import { defineConfig, nuicssPreset } from '@nofinite/nuicss'; export default defineConfig({ presets: [ nuicssPreset() ], // 1. Scan specific files content: { pipeline: { include: ['./src/**/*.{tsx,jsx,html}'] } }, // 2. Override default theme tokens theme: { colors: { primary: '#ff0055' } } }); ``` --- ## Developer DX Features NUI CSS comes with helper utilities designed for modern web apps. ### JS/TS Theme Resolver When you need to draw on a `` or use charting libraries, you often need the exact hex value of a CSS variable. ```ts import { getThemeValue } from '@nofinite/nuicss'; // Safely extracts the computed value (e.g., "#2563eb") const primaryColor = getThemeValue('color', 'primary'); ``` ### Anti-FOUC Dark Mode Sync When implementing dark mode via the `.dark` class, users might see a Flash of Unstyled Content (FOUC) while React boots up. Inject our provided script into your HTML `` to fix this perfectly. ```tsx import { DARK_MODE_SCRIPT } from '@nofinite/nuicss'; export function Head() { return ( {/* Synchronizes localStorage and system preference synchronously */}