KrenbatCSS

A modern utility-first CSS framework with support for responsive variants, state modifiers, and dark mode.

Installation

npm install -D krenbatcss

Quick Start

1. Create a krenbat.config.mjs:

export default {
  content: ['src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    colors: {
      brand: '#ff0000',
    },
  },
};

2. Build your CSS:

npx krenbatcss build -o dist/styles.css

3. Use utilities in your HTML:

<div class="p-4 bg-primary-500 text-white rounded-lg hover:bg-primary-600">
  Hello KrenbatCSS!
</div>

Features

• ✅ Utility-First - Build anything with utility classes
• ✅ Responsive - sm:, md:, lg:, xl:, 2xl: variants
• ✅ State Variants - hover:, focus:, active: support
• ✅ Dark Mode - dark: variant ready
• ✅ TypeScript - Full type definitions included
• ✅ JIT Mode - Only generates used utilities

Documentation

Visit the playground for live examples of all utilities.

License

MIT - Muzakky Rabbani