Build sleek interfaces straight from your markup.
Fast, modern, utility-first CSS framework for rapid UI development.
---
## 🚀 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