In this section we will install windicss with the help of windicli. Windi CSS is next generation utility-first CSS framework.
WindiCSS CDN
Enables Windi CSS for any site with one-line code without any build tools - Windi CSS on the browser runtime.
<script src="https://unpkg.com/windicss-runtime-dom"></script>
Install Windi Cli
npm i -g windicss
Create Project
Run below command to create windicss project
windicss --init <project-name> // windicss --init .
run
windicss --init larainfo
output:
Matched files: [ '/Windy CSS/larainfo/index.html' ]
Output file: /Windy CSS/larainfo/windi.css
Windi CSS folder
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>larainfo</title>
<link rel="stylesheet" href="windi.css">
</head>
<body class="bg-gray-100">
<div class="container mx-auto flex flex-col justify-center items-center h-screen">
<div class="lg:flex shadow rounded-lg">
<div class="bg-blue-500 rounded-t-lg lg:rounded-tr-none lg:rounded-l-lg lg:w-4/12 py-4 h-full flex flex-col justify-center">
<div class="text-center tracking-wide">
<div class="text-white font-bold text-8xl lg:text-4xl">24</div>
<div class="text-white font-normal text-4xl pt-4 lg:pt-0 lg:text-2xl">Sept</div>
</div>
</div>
<div class="w-full px-1 bg-white py-5 lg:px-2 lg:py-2 tracking-wide">
<div class="flex flex-row lg:justify-start justify-center">
<div class="text-gray-700 font-light text-sm text-center lg:text-left px-2">
1:30 PM
</div>
<div class="text-gray-700 font-light text-sm text-center lg:text-left px-2">
Organiser : IHC
</div>
</div>
<div class="text-gray-700 text-xl pb-1 text-center lg:text-left px-2">
International Conference Dubai
</div>
<div class="text-gray-800 font-light text-sm pt-1 text-center lg:text-left px-2">
A-142/1, A-142, Ganesh Nagar, Tilak Nagar, New Delhi, 110018
</div>
</div>
<div class="flex flex-row items-center w-full lg:w-1/3 bg-white lg:justify-end justify-center px-2 py-4 lg:px-0 rounded-lg">
<span class="tracking-wider text-gray-600 cursor-pointer bg-gray-100 hover:bg-gray-200 px-4 py-2 text-sm rounded-lg leading-loose mx-2">
Going
</span>
</div>
</div>
</div>
</body>
</html>
Windi CSS index.html
Windy CSS compile file
Windi Cli is like tailwind css jit cli. Use the -o parameter to specify the name of the generated css file, and the -t parameter to specify whether to add preflight (basestyles).
Generate normal css
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
Congratulations Windi CSS installation done.
Read more details in document.
