@unocss/cli

What is @unocss/cli?

@unocss/cli is a CLI tool for UnoCSS, a utility-first CSS framework that generates utility classes on-demand. It allows you to compile and optimize your CSS based on the utilities you use in your project.

What are @unocss/cli's main functionalities?

Compile CSS

This command compiles the CSS utilities used in the `src/index.html` file and outputs the optimized CSS to `dist/styles.css`.

unocss src/index.html -o dist/styles.css

Watch Mode

This command runs UnoCSS in watch mode, which means it will automatically recompile the CSS whenever changes are detected in the `src/index.html` file.

unocss src/index.html -o dist/styles.css --watch

Custom Config

This command allows you to specify a custom configuration file (`unocss.config.js`) for UnoCSS, enabling you to customize the utility classes and other settings.

unocss src/index.html -o dist/styles.css --config unocss.config.js

Other packages similar to @unocss/cli

tailwindcss

Tailwind CSS is a utility-first CSS framework similar to UnoCSS. It provides a set of predefined utility classes that you can use to build your designs. Unlike UnoCSS, which generates utilities on-demand, Tailwind CSS comes with a predefined set of utilities that you can extend and customize.

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. While it is not a utility-first CSS framework, it can be used to achieve similar functionalities by using plugins like `postcss-preset-env` and `postcss-import`. It offers a more modular and customizable approach to CSS processing.

README

@unocss/cli

The CLI for UnoCSS. A perfect fit for traditional backends.

Key Features

• 🍱 Suited for traditional backends like Laravel or Kirby
• 👀 Watch mode included
• 🔌 Supports custom configurations via unocss.config.js

Requirements

• Node 14+ (Node 16 recommended)

Installation

This package is shipped with the unocss package:

npm i -D unocss

You can also install it standalone:

npm i -D @unocss/cli

Usage

You can also pass multiple glob patterns to @unocss/cli:

unocss "site/snippets/**/*.php" "site/templates/**/*.php"

Example package configuration:

ℹ️ Make sure to add escaped quotes to your npm script glob patterns.

{
  "scripts": {
    "dev": "unocss \"site/{snippets,templates}/**/*.php\" --watch",
    "build": "unocss \"site/{snippets,templates}/**/*.php\""
  },
  "devDependencies": {
    "@unocss/cli": "latest"
  }
}

Development

Add the --watch (or -w) flag to enable watching for file changes:

unocss "site/{snippets,templates}/**/*.php" --watch

Production

unocss "site/{snippets,templates}/**/*.php"

The final uno.css will be generated to the current directory by default.

Built-in Features

Configurations

Create a unocss.config.js or unocss.config.ts configuration file the root-level of your project to customize UnoCSS.

import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: [
    { 'box': 'max-w-7xl mx-auto bg-gray-100 rounded-md shadow-sm p-4' }
  ]
})

For a list of options, head over to the UnoCSS configurations docs.

CLI Options

Inspect all available options with unocss --help.

--out-file

The output filename for the generated UnoCSS file. Defaults to uno.css in the current working directory.

--watch

Indicates if the files found by the glob pattern should be watched.

License

MIT License © 2021-PRESENT Anthony Fu

MIT License © 2021-PRESENT Johann Schopplich