🚀 Installation

npm i @unizap/unicss

⚡ Usage

CLI Usage

Generate your CSS file:

npx unicss

Or watch for changes and output to a custom file:

npx unicss -w -o src/output.css

Vite Integration

UniCSS now supports seamless integration with Vite! Add the plugin to your vite.config.js:

import { defineConfig } from 'vite';
import unicss from '@unizap/unicss/vite-plugin-unicss';

export default defineConfig({
  plugins: [
    unicss({
      output: 'src/unicss.css',  // Output path for generated CSS
      skipBase: false             // Optional: skip base styles
    })
  ]
});

Then import the generated CSS in your main entry file:

import './unicss.css';

Run Vite in development mode:

npm run dev

The plugin will:

• Automatically scan all .html, .js, .jsx, .ts, .tsx, .vue, and .svelte files
• Generate CSS based on the utility classes found
• Regenerate CSS on file changes with Hot Module Replacement (HMR)

PostCSS Integration (Recommended)

UniCSS works seamlessly with PostCSS, similar to Tailwind CSS. This is the recommended approach for modern web applications.

Method 1: Using @unicss Directives (Like Tailwind)

Create a CSS file with UniCSS directives:

/* app/globals.css or src/styles.css */
@unicss;

Configure PostCSS in your project:

// postcss.config.js
module.exports = {
  plugins: {
    '@unizap/unicss/postcss': {},
    autoprefixer: {}
  }
}

Import the CSS in your application:

// For Next.js, Vite, or other frameworks
import './globals.css'

The @unicss directive will be replaced with all generated utility classes. You can also split base and utilities:

@unicss base;      /* Base styles and resets */
@unicss utilities; /* Utility classes only */

Method 2: Use the Included PostCSS Config

UniCSS includes a ready-to-use PostCSS configuration with these plugins:

• @unizap/unicss/postcss - Generate UniCSS utilities
• postcss-import - Inline @import rules
• postcss-nested - Unwrap nested rules
• autoprefixer - Add vendor prefixes automatically

Import it directly:

// postcss.config.js
const unicssPostCSS = require('@unizap/unicss/postcss.config.js');
module.exports = unicssPostCSS;

🧩 Features

• Utility-first CSS generator
• PostCSS plugin with @unicss directives (like Tailwind)
• Automatic CSS filter utilities (e.g. blur-lg, brightness-150)
• Fast, modern, and easy to integrate
• Supports custom output paths and watch mode
• Vite plugin for seamless integration
• Works with Next.js, Remix, Astro, and any PostCSS-based setup
• Hot module replacement (HMR) in development

🔧 Development & Publishing

Building the package

npm run build

This creates:

• dist/index.js - Node.js bundle for CLI
• dist/unicss.min.js - Browser CDN bundle

Publishing to npm

npm run build
npm publish

See PUBLISHING.md for detailed instructions.

📄 License

MIT