638 counted, real-time features

Every line is a capability running in this tab or a number measured from the live engine.

Engine (live-measured) (8)

Counted from the real compiler running in this tab.

• 11,417 compiled static utilities
• 155 variants resolved by the grammar engine
• 10 breakpoints from 200 px to 5000 px
• 22 color palettes × 11 shades = 242 color tokens
• 37 utility categories
• 102 ready-made templates in this playground
• 2 output formats: pretty + minified
• 1 authoritative Nakshora 3.1 compiler, vendored and byte-identical

Variants (155) (155)

Every variant the v3.1 grammar resolves — hover, focus, md:, dark:, group-hover:, and more.

• variant (unlayered `*`)
• variant first-letter
• variant first-line
• variant marker
• variant selection
• variant file
• variant placeholder
• variant backdrop
• variant before
• variant after
• variant first
• variant last
• variant only
• variant odd
• variant even
• variant first-of-type
• variant last-of-type
• variant only-of-type
• variant visited
• variant target
• variant open
• variant default
• variant checked
• variant indeterminate
• variant placeholder-shown
• variant autofill
• variant optional
• variant required
• variant valid
• variant invalid
• variant in-range
• variant out-of-range
• variant read-only
• variant empty
• variant focus-within
• variant hover
• variant focus
• variant focus-visible
• variant active
• variant enabled
• variant disabled
• variant inert
• variant not
• variant group-first
• variant group-last
• variant group-only
• variant group-odd
• variant group-even
• variant group-first-of-type
• variant group-last-of-type
• variant group-only-of-type
• variant group-visited
• variant group-target
• variant group-open
• variant group-default
• variant group-checked
• variant group-indeterminate
• variant group-placeholder-shown
• variant group-autofill
• variant group-optional
• variant group-required
• variant group-valid
• variant group-invalid
• variant group-in-range
• variant group-out-of-range
• variant group-read-only
• variant group-empty
• variant group-focus-within
• variant group-hover
• variant group-focus
• variant group-focus-visible
• variant group-active
• variant group-enabled
• variant group-disabled
• variant group-inert
• variant group
• variant peer-first
• variant peer-last
• variant peer-only
• variant peer-odd
• variant peer-even
• variant peer-first-of-type
• variant peer-last-of-type
• variant peer-only-of-type
• variant peer-visited
• variant peer-target
• variant peer-open
• variant peer-default
• variant peer-checked
• variant peer-indeterminate
• variant peer-placeholder-shown
• variant peer-autofill
• variant peer-optional
• variant peer-required
• variant peer-valid
• variant peer-invalid
• variant peer-in-range
• variant peer-out-of-range
• variant peer-read-only
• variant peer-empty
• variant peer-focus-within
• variant peer-hover
• variant peer-focus
• variant peer-focus-visible
• variant peer-active
• variant peer-enabled
• variant peer-disabled
• variant peer-inert
• variant peer
• variant has
• variant group-has
• variant peer-has
• variant aria
• variant group-aria
• variant peer-aria
• variant data
• variant group-data
• variant peer-data
• variant @max
• variant @
• variant supports
• variant motion-safe
• variant motion-reduce
• variant contrast-more
• variant contrast-less
• variant dark
• variant max-xxs
• variant max-xs
• variant max-sm
• variant max-md
• variant max-lg
• variant max-xl
• variant max-2xl
• variant max-3xl
• variant max-4xl
• variant max-5xl
• variant max
• variant xxs
• variant xs
• variant sm
• variant md
• variant lg
• variant xl
• variant 2xl
• variant 3xl
• variant 4xl
• variant 5xl
• variant min
• variant portrait
• variant landscape
• variant ltr
• variant rtl
• variant forced-colors
• variant print
• variant starting

Breakpoints (10) (10)

Mobile-first width gates from 200 px watches to 5000 px video walls.

• xxs — 200 px and up
• xs — 400 px and up
• sm — 640 px and up
• md — 768 px and up
• lg — 1,024 px and up
• xl — 1,280 px and up
• 2xl — 1,536 px and up
• 3xl — 1,920 px and up
• 4xl — 2,560 px and up
• 5xl — 5,000 px and up

Utility categories (37) (37)

The taxonomy the JIT engine walks when it resolves your markup.

• category layout
• category display
• category position
• category inset
• category zIndex
• category overflow
• category visibility
• category sizing
• category margin
• category padding
• category gap
• category flex
• category grid
• category typography
• category textDecoration
• category textColor
• category backgroundColor
• category borderColor
• category gradients
• category borders
• category borderRadius
• category backgrounds
• category shadows
• category opacity
• category filters
• category transforms
• category transitions
• category animations
• category cursors
• category interactivity
• category svg
• category tables
• category accessibility
• category effects
• category whitespace
• category components
• category plugin

Color palettes (22) (22)

Each palette is a full design ramp usable across text, backgrounds, borders, rings, gradients and more.

• palette slate
• palette gray
• palette zinc
• palette neutral
• palette stone
• palette red
• palette orange
• palette amber
• palette yellow
• palette lime
• palette green
• palette emerald
• palette teal
• palette cyan
• palette sky
• palette blue
• palette indigo
• palette violet
• palette purple
• palette fuchsia
• palette pink
• palette rose

Color tokens (242) (242)

Every palette × shade pair resolvable as a token — text-indigo-500, bg-rose-950, border-emerald-200…

• slate-50
• slate-100
• slate-200
• slate-300
• slate-400
• slate-500
• slate-600
• slate-700
• slate-800
• slate-900
• slate-950
• gray-50
• gray-100
• gray-200
• gray-300
• gray-400
• gray-500
• gray-600
• gray-700
• gray-800
• gray-900
• gray-950
• zinc-50
• zinc-100
• zinc-200
• zinc-300
• zinc-400
• zinc-500
• zinc-600
• zinc-700
• zinc-800
• zinc-900
• zinc-950
• neutral-50
• neutral-100
• neutral-200
• neutral-300
• neutral-400
• neutral-500
• neutral-600
• neutral-700
• neutral-800
• neutral-900
• neutral-950
• stone-50
• stone-100
• stone-200
• stone-300
• stone-400
• stone-500
• stone-600
• stone-700
• stone-800
• stone-900
• stone-950
• red-50
• red-100
• red-200
• red-300
• red-400
• red-500
• red-600
• red-700
• red-800
• red-900
• red-950
• orange-50
• orange-100
• orange-200
• orange-300
• orange-400
• orange-500
• orange-600
• orange-700
• orange-800
• orange-900
• orange-950
• amber-50
• amber-100
• amber-200
• amber-300
• amber-400
• amber-500
• amber-600
• amber-700
• amber-800
• amber-900
• amber-950
• yellow-50
• yellow-100
• yellow-200
• yellow-300
• yellow-400
• yellow-500
• yellow-600
• yellow-700
• yellow-800
• yellow-900
• yellow-950
• lime-50
• lime-100
• lime-200
• lime-300
• lime-400
• lime-500
• lime-600
• lime-700
• lime-800
• lime-900
• lime-950
• green-50
• green-100
• green-200
• green-300
• green-400
• green-500
• green-600
• green-700
• green-800
• green-900
• green-950
• emerald-50
• emerald-100
• emerald-200
• emerald-300
• emerald-400
• emerald-500
• emerald-600
• emerald-700
• emerald-800
• emerald-900
• emerald-950
• teal-50
• teal-100
• teal-200
• teal-300
• teal-400
• teal-500
• teal-600
• teal-700
• teal-800
• teal-900
• teal-950
• cyan-50
• cyan-100
• cyan-200
• cyan-300
• cyan-400
• cyan-500
• cyan-600
• cyan-700
• cyan-800
• cyan-900
• cyan-950
• sky-50
• sky-100
• sky-200
• sky-300
• sky-400
• sky-500
• sky-600
• sky-700
• sky-800
• sky-900
• sky-950
• blue-50
• blue-100
• blue-200
• blue-300
• blue-400
• blue-500
• blue-600
• blue-700
• blue-800
• blue-900
• blue-950
• indigo-50
• indigo-100
• indigo-200
• indigo-300
• indigo-400
• indigo-500
• indigo-600
• indigo-700
• indigo-800
• indigo-900
• indigo-950
• violet-50
• violet-100
• violet-200
• violet-300
• violet-400
• violet-500
• violet-600
• violet-700
• violet-800
• violet-900
• violet-950
• purple-50
• purple-100
• purple-200
• purple-300
• purple-400
• purple-500
• purple-600
• purple-700
• purple-800
• purple-900
• purple-950
• fuchsia-50
• fuchsia-100
• fuchsia-200
• fuchsia-300
• fuchsia-400
• fuchsia-500
• fuchsia-600
• fuchsia-700
• fuchsia-800
• fuchsia-900
• fuchsia-950
• pink-50
• pink-100
• pink-200
• pink-300
• pink-400
• pink-500
• pink-600
• pink-700
• pink-800
• pink-900
• pink-950
• rose-50
• rose-100
• rose-200
• rose-300
• rose-400
• rose-500
• rose-600
• rose-700
• rose-800
• rose-900
• rose-950

Templates (102) (102)

Every pattern in the library loads into the live playground.

• Neon hero — Landing
• Glass navbar — Navbar
• Pricing trio — Pricing
• Glass cards — Cards
• Sign-in card — Auth
• Stats dashboard — Dashboard
• Product grid — E-commerce
• Article layout — Blog
• Footer, four columns — Footer
• CTA band — CTA
• Data table — Table
• Team grid — Team
• FAQ (details) — FAQ
• Masonry gallery — Gallery
• Minimal hero — Landing
• Brutalist poster — Brutal
• Skeleton loading — UX
• Dark app shell — Dashboard
• Restaurant menu — Business
• Portfolio hero — Portfolio
• Stats band — Marketing
• Cookie banner — UX
• Release timeline — Marketing
• Newsletter capture — Marketing
• 404 star — UX
• Split-screen auth — Auth
• Weather cards — Widgets
• Gradient gallery — Design
• Kanban board — Dashboard
• Hero with media — Landing
• Indigo hero — Indigo set
• Indigo cards — Indigo set
• Indigo pricing — Indigo set
• Indigo cta — Indigo set
• Indigo form — Indigo set
• Indigo stats — Indigo set
• Indigo nav — Indigo set
• Indigo footer — Indigo set
• Indigo testimonial — Indigo set
• Emerald hero — Emerald set
• Emerald cards — Emerald set
• Emerald pricing — Emerald set
• Emerald cta — Emerald set
• Emerald form — Emerald set
• Emerald stats — Emerald set
• Emerald nav — Emerald set
• Emerald footer — Emerald set
• Emerald testimonial — Emerald set
• Rose hero — Rose set
• Rose cards — Rose set
• Rose pricing — Rose set
• Rose cta — Rose set
• Rose form — Rose set
• Rose stats — Rose set
• Rose nav — Rose set
• Rose footer — Rose set
• Rose testimonial — Rose set
• Amber hero — Amber set
• Amber cards — Amber set
• Amber pricing — Amber set
• Amber cta — Amber set
• Amber form — Amber set
• Amber stats — Amber set
• Amber nav — Amber set
• Amber footer — Amber set
• Amber testimonial — Amber set
• Sky hero — Sky set
• Sky cards — Sky set
• Sky pricing — Sky set
• Sky cta — Sky set
• Sky form — Sky set
• Sky stats — Sky set
• Sky nav — Sky set
• Sky footer — Sky set
• Sky testimonial — Sky set
• Cyan hero — Cyan set
• Cyan cards — Cyan set
• Cyan pricing — Cyan set
• Cyan cta — Cyan set
• Cyan form — Cyan set
• Cyan stats — Cyan set
• Cyan nav — Cyan set
• Cyan footer — Cyan set
• Cyan testimonial — Cyan set
• Violet hero — Violet set
• Violet cards — Violet set
• Violet pricing — Violet set
• Violet cta — Violet set
• Violet form — Violet set
• Violet stats — Violet set
• Violet nav — Violet set
• Violet footer — Violet set
• Violet testimonial — Violet set
• Fuchsia hero — Fuchsia set
• Fuchsia cards — Fuchsia set
• Fuchsia pricing — Fuchsia set
• Fuchsia cta — Fuchsia set
• Fuchsia form — Fuchsia set
• Fuchsia stats — Fuchsia set
• Fuchsia nav — Fuchsia set
• Fuchsia footer — Fuchsia set
• Fuchsia testimonial — Fuchsia set

Editor (14)

A serious code editor, not a box.

• Live JIT compilation on every keystroke (200 ms debounce)
• Real Nakshora 3.1 compiler running 100% client-side — zero backend
• Line numbers with synchronized scrolling
• Tab inserts two spaces instead of losing focus
• Ctrl+Enter (Cmd+Enter) recompiles instantly
• Automatic localStorage autosave every change
• Reset-to-default button with confirmation
• HTML + custom CSS panels with live @apply / theme() / screen() expansion
• Preflight toggle — include or strip the CSS reset
• Minified-output toggle with byte savings readout
• Compile-time readout in milliseconds and CSS bytes
• Class-count meter for the current document
• Syntax-safe preview sandbox with CSP meta guard
• Dark and light chrome with system auto-detection

Live preview (10)

See the pattern at every size.

• Hot iframe preview with srcdoc injection (no network round-trip)
• Pixel-exact preview frame with scrollable viewport
• Device presets: iPhone SE → Galaxy → iPad → laptop → desktop → 5K studio
• Custom width slider from 200 px to 5000 px — matching all 10 engine breakpoints
• Zoom controls 25%–200% for fine inspection
• Orientation flip (portrait ↔ landscape)
• Viewport ruler showing live pixel dimensions
• Side-by-side and stacked layout modes
• Preview background switches with theme
• Instant re-render on any HTML or CSS edit

Output & export (8)

The real CSS, exactly as compiled.

• Pretty-printed CSS output with Nakshora section headers
• Minified CSS output via the engine minifier
• Copy CSS to clipboard in one click
• Copy minified CSS to clipboard in one click
• Download stylesheet as .css file
• Live byte counters (pretty vs minified)
• Live utility/rule statistics from the real engine
• Compile speed badge (ms per keystroke pass)

Sharing & templates (8)

Reproduce any state with one URL.

• Shareable URLs — every playground state is encoded in the hash
• CompressionStream-deflate + base64url encoding (no server needed)
• Copy-link button with confirmation toast
• Share links survive offline: decoding is 100% client-side
• Deep links into any template with one click
• Templates listed by category with search filter
• URL keeps your template id visible while editing
• State restored exactly on return (HTML + CSS + options)

The real engine (10)

Not a clone — the actual v3.1 compiler.

• Nakshora 3.1.0 compiler — the same engine that ships with the npm package
• Tailwind 3.4 grammar parity, byte-identical output, zero runtime
• 11,417 static utilities compiled from the canonical grammar
• 155 variants (hover, focus, md, dark, group-hover, …)
• 10 breakpoints: 200, 400, 576, 768, 1024, 1280, 1536, 2000, 3000, 5000 px
• 22 palettes × 11 shades of color tokens
• CSS-first: no PostCSS plugin required, no JavaScript runtime
• @apply / theme() / screen() directives processed in-browser
• JIT engine: cold compile ~29 ms, hot compile ~1–5 ms
• MIT licensed, authored by Rizwan Rahim Chowdhury, RRC Development

Platform & SEO (12)

World-class hosting and metadata.

• React 18 + Vite + TypeScript application
• Server-rendered SEO shell for every route (prerendered at build time)
• Free static hosting on Cloudflare Pages — play.nakshora.bsdc.info.bd
• Fully responsive UI from 320 px phones to 5K displays
• Semantic HTML with exactly one h1 per page
• JSON-LD WebApplication structured data
• Open Graph + Twitter cards on every route
• robots.txt + sitemap.xml + security.txt + humans.txt
• llms.txt + llms-full.md for AI agents
• Official Nakshora star branding and favicons
• Keyboard-accessible controls with visible focus states
• Zero tracker, zero cookie banner needed — no third parties at all