Zero-runtime Tailwind CSS responsive utilities with better developer experience.
Transform responsive Tailwind classes at build time with cleaner syntax and zero runtime overhead.
- ⚡ Zero Runtime Overhead - Build-time transformations (0KB runtime for most tools, tiny runtime for Next.js 16+)
- 🎨 Better DX - Cleaner, more maintainable responsive syntax
- 🔒 Type Safe - Full TypeScript support with autocomplete
- 🔧 Universal - Works with Vite, Webpack, and more
- 📦 Tiny - ~8KB package
npm install -D cls-extended
# or
pnpm add -D cls-extended
# or
yarn add -D cls-extendedVite:
// vite.config.ts
import clsExtended from "cls-extended/adapters/vite";
export default defineConfig({
plugins: [clsExtended()],
});Webpack:
// webpack.config.js
import clsExtended from "cls-extended/adapters/webpack";
export default {
plugins: [clsExtended()],
};import { cls } from "cls-extended";
function Component() {
return (
<div
className={cls("text-xl font-bold", {
md: "text-2xl",
lg: "text-3xl",
})}
>
Responsive Text
</div>
);
}Compiles to:
<div className="text-xl font-bold md:text-2xl lg:text-3xl">Responsive Text</div>The plugin uses AST transformation to detect cls() calls during the build process and compiles them into static Tailwind class strings:
- Build Time: Plugin scans your code for
cls()calls - AST Transform: Parses and transforms using Babel
- Output: Generates standard Tailwind classes with zero runtime code
This means:
- ✅ No runtime JavaScript added to your bundle
- ✅ Transformation happens once during build
- ✅ Production code contains only plain strings
- ✅ Full compatibility with Tailwind's JIT mode
For detailed configuration, advanced usage, and more examples, see the package documentation.
This is a monorepo managed with pnpm and Turborepo.
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run tests
pnpm test
# Type check
pnpm typecheck
# Lint
pnpm lintcls-extended/
├── packages/
│ └── cls-extended/ # Main plugin package
├── examples/
│ ├── nextjs/ # Next.js example
│ └── vite-react/ # Vite + React example
# Build the plugin
pnpm --filter cls-extended build
# Run example in dev mode
pnpm --filter vite-react dev
# Run tests in watch mode
pnpm --filter cls-extended testContributions are welcome! Please follow these guidelines:
This project uses Conventional Commits:
feat:- New features (minor version bump)fix:- Bug fixes (patch version bump)docs:- Documentation changeschore:- Maintenance tasksBREAKING CHANGE:- Breaking changes (major version bump)