📦 @cbxc/tailwind-responsive-variants

A zero-config Tailwind variant extractor that:

✓ Scans your project for calls to resClass() ✓ Extracts responsive utilities (mob:, tab:, des:, etc.) ✓ Generates a Tailwind safelist file (tw-generated-variants.ts) ✓ Updates automatically via a background worker ✓ Supports multi-line template strings ✓ Works in large projects — powered by multi-threaded scanning

Perfect for React / Remix / React Router / Vite projects using custom responsive prefixes.

🚀 Features

Automatic variant extraction from:

resClass({ all: "flex items-center", mob: "px-4", des: "px-20", })

Outputs grouped + formatted variant lists:

export const twGeneratedVariants = { all: flex items-center gap-4 , mob: mob:px-4 , des: des:px-20 , };

Fully automated — no manual safelist maintenance

Parallel worker scanning for fast rebuilds

Supports nested folders & unlimited files

SSR-safe plugin for React Router + Vite + Cloudflare Workers

📥 Installation Private npm package npm install @cbxc/tailwind-responsive-variants --save-dev

Or with Yarn:

yarn add -D @cbxc/tailwind-responsive-variants

⚙️ Vite Setup

Add the plugin to your Vite config:

// vite.config.ts import { defineConfig } from "vite"; import tailwindResponsiveVariants from "@cbxc/tailwind-responsive-variants/vite";

export default defineConfig({ plugins: [ tailwindResponsiveVariants(), // ...other plugins ] });

🧱 Usage: resClass()

Import the helper:

import { resClass } from "@cbxc/tailwind-responsive-variants";

Use it anywhere you'd normally use className:

🏗️ Output File

The plugin automatically creates:

app/tw-generated-variants.ts

And updates it every time a file changes.

Add this to your Tailwind config:

import { twGeneratedVariants } from "./app/tw-generated-variants";

export default { safelist: Object.values(twGeneratedVariants).flatMap((block) => block.split(/\s+/).filter(Boolean) ), };

🌐 Custom Breakpoints Supported

You can use any custom prefixes:

mob:

tab:

des:

deslg:

desxl:

Anything else you define in Tailwind

The extractor treats the prefix before the : as the variant key.

🛠 How it Works (Technical Summary)

A Vite plugin starts a background worker thread

Worker scans all app/**/*.{ts,tsx,js,jsx}

Parsing performed using TypeScript AST — fast & accurate

Each resClass({...}) call is analyzed

Variants are stored in a Map

When values change, a new fixed, deterministic, grouped output file is written

🧪 Local Development

Inside your project:

npm link

Inside a consuming project:

npm link @cbxc/tailwind-responsive-variants

Build during development:

npm run dev

Build for release:

npm run build

🔒 Private Publishing

Since this is a private npm package, your npm must be authenticated:

npm login

Then publish:

npm publish --access=restricted

🧩 Troubleshooting Cannot find module 'worker_threads'

Cloudflare SSR is trying to load the plugin — but the plugin is SSR-safe. Ensure your config has this (plugin adds it automatically):

ssr: { noExternal: ["@cbxc/tailwind-responsive-variants"] }

Missing variants?

Make sure your app root is correct — plugin uses:

/app

Correct for React Router + Remix layouts.