open-index/open-npm huggingface dataset:
npm package: @netoyed/ux4g-design-system-v3
Description: UX4G is a high-performance, Just-In-Time (JIT) design system engine inspired by Tailwind CSS. It is built to be production-grade, secure, and multi-platform.
Latest version: 1.3.10

# UX4G Design System (Beta)

UX4G is a high-performance, Just-In-Time (JIT) design system engine inspired by Tailwind CSS. It is built to be production-grade, secure, and multi-platform.

## 🚀 Features
- **Just-In-Time Engine**: Generates only the CSS you use.
- **Enforced Prefix**: All classes are prefixed with `ux4g-` to prevent conflicts.
- **Multi-Platform**: Works with React, Vue, PHP, and static HTML.
- **Browser Runtime**: Includes a runtime engine for CDNs/Playgrounds.

## 📦 Installation

```bash
# Install the CLI
npm install @ux4g/cli
```

## 🛠 Usage via PostCSS (Recommended)

1. **Install**
   ```bash
   npm install @netoyed/ux4g-design-system-v3
   ```

2. **Configure PostCSS**
   Add it to your `postcss.config.js`:
   ```javascript
   module.exports = {
     plugins: {
       '@netoyed/ux4g-design-system-v3': {},
       autoprefixer: {},
     }
   }
   ```

3. **Add Directives**
   Add the following to your main CSS file (e.g. `src/styles.css`):
   ```css
   @ux4g base;
   @ux4g utilities;
   ```

4. **Start Dev Server**
   Just run `npm run dev`. UX4G will automatically inject styles.

## 💻 Usage via CLI (Standalone)

You can use the CLI directly via `npx` without installing if you prefer, or install globally/locally.

1. **Run Build**
   ```bash
   npx @netoyed/ux4g-design-system-v3 build -i src/input.css -o dist/output.css
   ```
   
   Or to watch for changes:
   ```bash
   npx @netoyed/ux4g-design-system-v3 watch
   ```

## 🌍 Usage via CDN (Runtime)

For rapid prototyping or environments without a build step, use the Runtime Engine.
**Note:** Do not use this for production high-traffic sites as it compiles CSS in the browser.

```html
<script src="https://cdn.jsdelivr.net/npm/@netoyed/ux4g-design-system-v3-cdn/dist/ux4g.cdn.min.js"></script>

<div class="ux4g-p-4 ux4g-bg-primary-500 ux4g-text-white ux4g-rounded-md">
  Hello UX4G!
</div>
```

## 🎨 Utility Registry

UX4G supports a wide range of utilities:

- **Spacing**: `ux4g-p-4`, `ux4g-m-2`, `ux4g-mx-auto`
- **Colors**: `ux4g-text-red-500`, `ux4g-bg-blue-600`
- **Layout**: `ux4g-flex`, `ux4g-grid`, `ux4g-hidden`
- **Flexbox**: `ux4g-items-center`, `ux4g-justify-between`, `ux4g-gap-4`
- **Sizing**: `ux4g-w-full`, `ux4g-h-1/2`, `ux4g-min-h-screen`
- **Typography**: `ux4g-text-center`, `ux4g-font-bold`
- **Borders**: `ux4g-rounded-lg`, `ux4g-border-gray-200`