Windi CSS CLI
Install
Add the package:
npm i -g windicss Usage
Print Help Message
windicss --help // windicss -h should print the help message like bellow.
Generate css from text files that containing windi classes. By default, it will use interpretation mode to generate a single css file. Usage: windicss [filenames] windicss [filenames] -c -m -d windicss [filenames] -c -s -m -d windicss [filenames] [-c | -i] [-a] [-b | -s] [-m] [-d] [-p <prefix:string>] [-o <path:string>] [--args arguments] Options: -h, --help Print this help message and exit. -v, --version Print windicss current version and exit. -i, --interpret Interpretation mode, generate class selectors. This is the default behavior. -c, --compile Compilation mode, combine the class name in each row into a single class. -a, --attributify Attributify mode, generate attribute selectors. Attributify mode can be mixed with the other two modes. -t, --preflight Add preflights, default is false. -b, --combine Combine all css into one single file. This is the default behavior. -s, --separate Generate a separate css file for each input file. -d, --dev Enable hot reload and watch mode. -m, --minify Generate minimized css file. -z, --fuzzy Enable fuzzy match, only works in interpration mode. -p, --prefix PREFIX Set the css class name prefix, only valid in compilation mode. The default prefix is 'windi-'. -o, --output PATH Set output css file path. -f, --config PATH Set config file path. --style Parse and transform windi style block. --init PATH Start a new project on the path. Initial Test Project
windicss --init <project> // windicss --init . windicss --init <project> --compile // windicss --init hello_world --compile File Names
The [filenames] parameter can include filepaths and glob patterns(powerd by node-glob).
windicss './hello.html' './world.html' windicss './**/*.html' windicss './src/**/*.html' windicss './hello.html' './world.html', './src/**/*.svelte' Compile CSS File
Generate normal css
Use the -o parameter to specify the name of the generated CSS file, and the -t parameter to specify whether to add preflight (basestyles).
windicss './**/*.html' windicss './**/*.html' -to windi.css windicss './test.html' -to windi.css windicss './test.html' --preflight --output windi.css Minimize build
Use -m or --minify to generate minimized CSS file. This parameter is mostly used for build time.
windicss './**/*.html' -mto windi.min.css windicss './**/*.html' -to windi.css --minify Using compilation mode
Compilation mode will combine all windi utilities into a new class, which you can specify with -p or --prefix
windicss './**/*.html' -cto windi.css windicss './**/*.html' -ctom windi.min.css windicss './**/*.html' -cto windi.css --minify windicss './**/*.html' -cto windi.css --minify --prefix 'tw-' windicss './test.html' --compile --preflight --output windi.css Give an example
<div class="windi-15wa4me"> <img class="windi-1q7lotv" src="/img/erin-lindford.jpg" alt="Woman's Face"> <div class="windi-7831z4"> <div class="windi-x3f008"> <p class="windi-2lluw6"> Erin Lindford </p> <p class="windi-1caa1b7"> Product Engineer </p> </div> <button class="windi-d2pog2">Message</button> </div> </div> Using attributify mode
You can combine attributify mode with interpretation mode or compilation mode.
windicss './**/*.html' -ato windi.css windicss './**/*.html' -atom windi.min.css windicss './**/*.html' -ato windi.css --minify windicss './test.html' --attributify --preflight --output windi.css windicss './test.html' --attributify --compile --preflight --output windi.css Give an example
<button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white" font="mono light" p="y-2 x-4" border="2 rounded blue-200" > Button </button> Pass a config file
Pass a configuration file with the -f or --config parameter, currently only js configuration files are supported.
windicss './**/*.html' -to windi.css --config windi.config.js Give an example
module.exports = { // ... theme: { extend: { colors: { primary: '#1c1c1e', }, // ... }, }, } Dev mode
Development mode will turn on hot reloading and will watch your file changes to update your CSS file in real time.
windicss './**/*.html' -to windi.css --dev Note: For better hotloading experience (~5ms) we don't remove built CSS at development time, so you are expected to rebuild it once at release time using the minimize command to get the best experience for both development and build. Such as
windicss './**/*.html' -mto windi.css
Fuzzy mode
By default windi matches class/className='...' in the incoming files, if your file type doesn't match, you can turn this option on. It will match all possible windi utilities contained in the file
windicss './**/*.html' -to windi.css --dev --fuzzy You can also configure extractors for specific file types
module.exports = { // ... extract: { extractors: [ { extractor: (content) => { return { classes: content.match(/(?<=class:)[!@\w-]+/g) ?? [] } }, extensions: ['svelte'], }, ], }, // ... } Style block
To enable style block, you need to use --style arg.
windicss './**/*.html' -to windi.css --dev --style Define style block like this:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cli</title> <link rel="stylesheet" href="windi.css"> <style lang='windi'> .btn-blue { @apply bg-blue-500 hover:bg-blue-700 text-white; padding-top: 1rem; } </style> </head>