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>