@unizap/unicss/README.md

Unicss: Build sleek interfaces straight from your markup. Fast, modern, utility-first CSS framework for rapid UI development.

<p></p>
<p align="center">
  <img src="https://ik.imagekit.io/unizap/unicss_logo.svg" alt="UniCSS Logo" height="80"/>
</p>


<p align="center">
  <b>Build sleek interfaces straight from your markup.<br>
  Fast, modern, utility-first CSS framework for rapid UI development.</b>
</p>

---

## 🚀 Installation

```sh
npm i @unizap/unicss
```

---

## ⚡ Usage

### CLI Usage

Generate your CSS file:

```sh
npx unicss
```

Or watch for changes and output to a custom file:

```sh
npx unicss -w -o src/output.css
```

### Vite Integration

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

```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:

```js
import './unicss.css';
```

Run Vite in development mode:

```sh
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:

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

Configure PostCSS in your project:

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

Import the CSS in your application:

```js
// 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:

```css
@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:

```js
// 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

```sh
npm run build
```

This creates:
- `dist/index.js` - Node.js bundle for CLI
- `dist/unicss.min.js` - Browser CDN bundle

### Publishing to npm

```sh
npm run build
npm publish
```

See [PUBLISHING.md](./PUBLISHING.md) for detailed instructions.

---

## 📄 License

MIT