NOMAD ANNA

A complete developer experience for VS Code — two crafted color themes, an original file icon theme, a Smart Tailwind engine that turns arbitrary pixel classes into real utilities, an opt-in recommended-extension manager and a welcome dashboard. One extension.

Themes

Both themes style the full workbench (title bar, activity bar, sidebar, tabs, breadcrumbs, panels, terminal + ANSI palette, notifications, inputs, dropdowns, buttons, scrollbars, git decorations, diff/merge, bracket pairs) and tuned syntax for JavaScript, TypeScript, JSX/TSX, HTML, CSS/SCSS, JSON, Python, PHP, Vue, Svelte, Markdown and YAML. Editor text meets WCAG AAA contrast (7:1) and every syntax color meets AA (4.5:1).

Switch with the standard theme picker (Preferences: Color Theme) or NOMAD ANNA: Switch Theme, which previews themes live as you move through the list.

NOMAD ANNA Icons

An original icon set with one visual language: tinted rounded badges with crisp glyphs for files, and type-colored folders with cut-out emblems. Covers 86 file types — JS, TS, React, Vue, Svelte, HTML, CSS, SCSS, JSON, Markdown, Python, PHP, YAML, SVG, images, fonts, Docker, Go, Rust, Java, Kotlin, C/C++/C#, Ruby, Swift, Dart, SQL, GraphQL, Prisma, CSV, PDF, archives, media, certificates, Terraform, Kubernetes, Office documents and common config files (package.json, tsconfig, Tailwind, Vite, ESLint, Prettier, Next.js, Babel, webpack, .env, git…), plus folders such as components, pages, hooks, context, services, utils, assets, public, styles, types, tests and api (with open states and common aliases).

Enable it via Preferences: File Icon Theme → NOMAD ANNA Icons or NOMAD ANNA: Enable Icon Theme.

Smart Tailwind Engine

Converts arbitrary values into the standard utilities your project actually generates:

<div class="w-[1320px] p-[40px] gap-[32px] md:w-[1320px] hover:p-[40px] -mt-[24px]">
<!-- Tailwind v4 -->
<div class="w-330 p-10 gap-8 md:w-330 hover:p-10 -mt-6">

It verifies equivalence — it doesn't just divide by four

• Version aware. Tailwind v4 accepts any multiple of --spacing / 4, so w-[1320px] → w-330. Tailwind v3 only ships its default scale, so in a default v3 project w-[1320px] is kept, and the hover explains how to make it available: theme.extend.spacing: { '330': '82.5rem' }.
• Project aware. Reads tailwind.config.{js,cjs,mjs,ts} (theme, theme.extend, prefix, separator, presets, corePlugins) and v4 CSS entry points (@import "tailwindcss" prefix(tw), @theme blocks including --spacing, --spacing-*, --radius-*, --text-*, --container-*, initial resets and @config). Configs are read statically — workspace code is never executed. If a value can't be resolved safely, the engine converts less, never something invalid.
• CSS-level honesty. text-[20px] → text-xl is approximate because text-xl also sets a line-height, so it's never applied automatically (opt in with nomadAnna.tailwind.includeApproximate). With a modifier it becomes exact: text-[20px]/7 → text-xl/7. Letter-spacing utilities are em-based, so tracking-[2px] is always kept.
• Variants and modifiers preserved. Responsive, state (hover:, focus:, active:), dark:, arbitrary variants ([&>svg]:), group-*/data-*, negatives (-mt-[24px] and mt-[-24px]), !important (v3 leading and v4 trailing) and prefixes.
• Units. px, rem and 0 are compared (rem ↔ px uses nomadAnna.tailwind.rootFontSize, default 16). %, em, vh, calc(), var() … are left alone.

Supported utilities: width/height/min/max/size, padding, margin, gap, space-between, inset/top/right/bottom/left/start/end, translate, scroll margin/padding, flex-basis, text-indent, border-spacing, border radius (all corners/sides), font-size, line-height, letter-spacing (explained, never converted by default), border/divide/outline/ring widths, outline/ring offsets, decoration thickness, underline offset, blur and backdrop-blur. Logical-property utilities (ps, ms, start, …) and size-* respect the v3 minor version that introduced them.

Three ways to use it

You can also add "source.fixAll.nomadAnna": "explicit" to editor.codeActionsOnSave.

Where it looks: class/className attributes (HTML, JSX/TSX, Vue, Svelte, Astro, PHP templates), Vue :class bindings, Svelte class={…} / class:name directives, Astro class:list, and helper calls such as clsx(), cn(), cva(), twMerge(), tv() and tw`…` (configurable). Template literals are handled where safe: only static text is touched, never a class glued to ${…}. Comments, <style> blocks, JSX text and unrelated strings are ignored. Converting twice changes nothing, and if the equivalent class already exists in the list the arbitrary one is removed instead of duplicated.

NOMAD ANNA's engine is independent of Tailwind CSS IntelliSense — the two complement each other.

Recommended extensions (optional)

NOMAD ANNA: Manage Recommended Extensions or the dashboard shows each recommendation, whether it's installed, and lets you install one, install all (after a confirmation listing exactly what will be installed) or open its Marketplace page:

Prettier · ESLint · Tailwind CSS IntelliSense · Error Lens · Auto Rename Tag · Path Intellisense · GitLens · Material Icon Theme

Nothing is ever installed silently, and NOMAD ANNA does not declare an extensionPack.

Dashboard

Opens once after installation and anytime with NOMAD ANNA: Open Dashboard: theme previews and switching, Tailwind engine status, detected Tailwind version and mode toggles, icon preview, extension status and installs, and shortcuts to settings. It follows your active theme's colors.

Commands

Settings

Version detection

Per file, NOMAD ANNA finds the nearest project (Tailwind config, or a package.json depending on tailwindcss, so monorepos work) and determines the version from, in order: the nomadAnna.tailwind.version setting, the installed node_modules/tailwindcss, the package.json range, a CSS entry (@import "tailwindcss" → v4, @tailwind → v3), a config file (v3), or falls back to v3.4. Changes to configs, CSS and package.json are picked up automatically. Hover any arbitrary class, or check the TW status bar item, to see what was detected.

Known limitations

• Config values produced by code (functions, imports, spreads) can't be read statically; in those cases the engine offers fewer conversions rather than guessing. If a v3 config can't be read at all, conversions are disabled for that project.
• Classes built dynamically (e.g. `w-[${size}px]`) are never touched.
• The px ↔ rem comparison assumes your root font size matches nomadAnna.tailwind.rootFontSize.

License

MIT