Instant CSS - AI-powered CSS utilities with baroque elegance
BaroCSS is a next-generation CSS runtime that brings the power of utility-first CSS to real-time development. Built from the ground up with a completely new parser, it supports the complete Tailwind syntax without requiring build processes, making it perfect for AI-generated UI components and developers who need instant feedback.
- 🚀 Real-time JIT Mode - Generate CSS instantly as you use it
- 🔍 Automatic DOM Detection - Automatically detects and processes class changes
- ⚡ Zero Build Time - No build step, immediate styling
- 🎯 95%+ Tailwind Compatible - Use familiar Tailwind syntax everywhere
- 🌐 Universal - Works in browsers, Node.js, and any JavaScript environment
- 🎨 Complete Utility Support - Layout, spacing, colors, typography, and more
- 📱 Responsive & Interactive - All variants work out of the box
- 🧠 Smart Caching - Intelligent caching system for performance optimization
Visit our comprehensive documentation site: BaroCSS Documentation
The documentation includes:
- Getting Started guide
- Installation instructions
- Core concepts explanation
- Plugin system documentation
- Complete API reference
- Real-world examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BaroCSS App</title>
<script type="module" src="https://unpkg.com/barocss/dist/cdn/barocss.js"></script>
</head>
<body>
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8 rounded-xl shadow-2xl">
<h1 class="text-4xl font-bold mb-6">Hello BaroCSS!</h1>
<p class="text-xl opacity-90">Instant styling without build</p>
<button class="mt-6 bg-white text-blue-600 px-6 py-3 rounded-lg hover:bg-gray-100 transition-all duration-300 transform hover:scale-105">
Get Started
</button>
</div>
</body>
</html># Using pnpm (recommended)
pnpm add barocss@latest
# Using npm
npm install barocss@latest
# Using yarn
yarn add barocss@latestimport { BrowserRuntime } from 'barocss/runtime/browser';
// Initialize runtime
const runtime = new BrowserRuntime();
// Watch DOM changes and auto-style
runtime.observe(document.body, { scan: true });BaroCSS works like Tailwind CSS's JIT mode but processes everything in real-time:
- DOM Change Detection - Automatically detects new classes
- Class Parsing - Analyzes Tailwind syntax (95%+ compatible)
- CSS Generation - Creates styles instantly using JIT approach
- Style Injection - Adds CSS to the page in real-time
// Just add classes - BaroCSS handles the rest
document.body.innerHTML = `
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8 rounded-xl">
<h1 class="text-4xl font-bold mb-6">Real-time Styling</h1>
<p class="text-xl opacity-90">This gets styled instantly!</p>
</div>
`;
// BaroCSS automatically:
// ✅ Detects new classes
// ✅ Generates CSS
// ✅ Applies styles
// ✅ No build step neededimport { BrowserRuntime } from 'barocss/runtime/browser';
const runtime = new BrowserRuntime();
// Add classes dynamically
runtime.addClass('bg-red-500 text-white p-4 rounded-lg shadow-md');
// Classes work immediately
document.body.innerHTML = `
<div class="bg-red-500 text-white p-4 rounded-lg shadow-md">
Styled instantly!
</div>
`;<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<h3 class="text-lg font-semibold mb-2">Card 1</h3>
<p class="text-gray-600">Responsive grid with hover effects</p>
</div>
<!-- More cards... -->
</div><button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 text-white font-medium py-2 px-4 rounded transition-colors">
Interactive Button
</button><div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6 rounded-lg">
<h2 class="text-xl font-semibold">Dark Mode Support</h2>
<p>Automatically adapts to system preferences</p>
</div><div class="w-[calc(100%-2rem)] bg-[#ff6b6b] text-[rgb(255,255,255)] p-4">
Custom values with arbitrary value syntax
</div>const runtime = new BrowserRuntime({
config: {
theme: {
extend: {
colors: {
'brand': {
50: '#f0f9ff',
500: '#0ea5e9',
900: '#0c4a6e',
}
},
spacing: {
'18': '4.5rem',
'88': '22rem',
}
}
}
}
});const runtime = new BrowserRuntime({
config: {
darkMode: 'class', // or 'media'
theme: {
extend: {
colors: {
gray: {
900: '#111827',
800: '#1f2937',
}
}
}
}
}
});import { BrowserRuntime } from 'barocss/runtime/browser';
const runtime = new BrowserRuntime();
runtime.observe(document.body, { scan: true });import { ServerRuntime } from 'barocss/runtime/server';
const serverRuntime = new ServerRuntime();
const css = serverRuntime.generateCss('bg-blue-500 text-white p-4');import { parseClassToAst, generateCss, createContext } from 'barocss';
const ctx = createContext({
theme: {
colors: { red: { 500: '#ef4444' } },
spacing: { 4: '1rem' }
}
});
const css = generateCss('bg-red-500 text-white p-4', ctx);BaroCSS supports 95%+ of Tailwind CSS utilities:
container,columns,break-after,break-beforeblock,inline-block,inline,flex,inline-flexgrid,inline-grid,contents,hidden
flex,grid,order,gapjustify-start,justify-center,justify-enditems-start,items-center,items-end
p-4,m-2,space-x-4,space-y-2px-6,py-3,pt-2,pb-4
w-full,h-screen,min-h-screen,max-w-mdw-1/2,h-16,min-w-0,max-h-96
text-sm,font-bold,leading-relaxedtext-center,text-left,text-rightuppercase,lowercase,capitalize
bg-blue-500,bg-gradient-to-r,bg-[url(...)]bg-opacity-50,bg-blend-multiply
border-2,rounded-lg,border-blue-500border-opacity-25,border-dashed
shadow-lg,opacity-50,blur-smbackdrop-blur,backdrop-filter
transition-all,duration-300,ease-in-outrotate-45,scale-110,translate-x-4
hover:bg-blue-600,focus:ring-2,active:scale-95group,peer,group-hover:,peer-focus:
- JIT Generation - Only generates CSS you actually use
- Smart Caching - Avoids regenerating existing styles
- Efficient Parsing - Fast class name processing
- Tree Shaking - Removes unused utilities automatically
- Minimal Output - Generates optimized CSS
Extend BaroCSS with custom utilities and variants:
const customPlugin = (ctx: Context) => {
// Register custom utilities
ctx.extendTheme('colors', {
'custom-blue': '#1e40af',
'custom-green': '#059669'
});
// Add custom variants
// ... plugin implementation
};
const runtime = new BrowserRuntime({
config: {
plugins: [customPlugin]
}
});barocss/
├── apps/
│ └── barocss-docs/ # Documentation site
├── packages/
│ └── barocss/ # Core BaroCSS framework
└── docs/ # Project documentation
- Node.js 18+
- pnpm
# Clone the repository
git clone https://github.com/barocss/barocss.git
cd barocss
# Install dependencies
pnpm install
# Run tests
pnpm test
# Start development servers
pnpm devThe documentation site is built with Next.js and deployed to GitHub Pages:
# Navigate to docs directory
cd apps/barocss-docs
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm buildFor detailed documentation, visit our documentation site or check the local docs:
We welcome contributions! Please see our Contributing Guide for details.
This project is licensed under the MIT License - see the LICENSE file for details.
- Tailwind CSS - For the amazing utility-first approach and JIT inspiration
- CSS Working Group - For advancing CSS standards
- Community Contributors - For feedback and contributions
BaroCSS - Where Tailwind meets realtime. Style anything, anywhere, instantly.
No build step. No waiting. Just pure, instant CSS magic. ✨