Skip to content

Install

You can install Winduum via npm and use it in your Node.js project.
Or copy and paste the components and use Winduum only as a TailwindCSS plugin.

See Trying Winduum Online section below to see all possible examples of use.

WARNING

Winduum is in early preview. Can be used for production, but some features may change over time.

npm

shell
npm i winduum

PostCSS or LightingCSS

The components are written in plain CSS, so sources can be also loaded in browsers without a build step or used in any other build tool such as PostCSS or LightningCSS.

css
@import "winduum/src/base/index.css";
@import "winduum/src/ui/index.css" layer(components);
@import "winduum/src/components/index.css" layer(components);
@import "winduum/src/utilities/index.css" layer(components);
@import "winduum/src/base/tailwind.css";
js
import "winduum/src/base/index.css"
import "winduum/src/ui/index.css"
import "winduum/src/components/index.css"
import "winduum/src/utilities/index.css"
import "winduum/src/base/tailwind.css"

Or you can include components separately, follow usage steps with each component.

css
@import "winduum/src/base/index.css";
@import "winduum/src/ui/btn/index.css" layer(components);
@import "winduum/src/utilities/index.css" layer(components);
@import "winduum/src/base/tailwind.css";
js
import "winduum/src/base/index.css"
import "winduum/src/ui/btn/index.css"
import "winduum/src/utilities/index.css"
import "winduum/src/base/tailwind.css"

With layer(components) you can use TailwindCSS classes, for example class="ui-btn lg:square" to make button square only from lg breakpoint.

INFO

You can either use the imports directly from npm and leverage updates.
Or you can copy and paste from the source to your project and make it your own.

Following PostCSS plugins are required.

And css-has-pseudo is recommended for better :has compatibility in older browsers.

TailwindCSS

It's optional, but to leverage the full functionality of the framework, use of TailwindCSS is recommended. Follow the installation steps in TailwindCSS docs and include Winduum as a plugin, see Config for more info.

Stylelint

It's also recommended to use Stylelint to help add conventions to your styles. You can check and use basic .stylelintrc for Winduum here.

CSS Pre-processors

You can use any CSS pre-processor you want. Just be sure to add TailwindCSS to your configuration, either via CLI or PostCSS.

CDN

This is meant only for basic usage, only basic styles are included for TailwindCSS, such as colors and font variants.

To leverage the full functionality of the framework, TailwindCSS and build step is recommended.

html
<link href="https://cdn.jsdelivr.net/npm/winduum/dist/main.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/winduum/dist/tailwind.css" rel="stylesheet" type="text/css" />
<!--or-->
<link href="https://cdn.jsdelivr.net/npm/winduum/src/base/index.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/winduum/src/ui/btn/index.css" rel="stylesheet" type="text/css" />

Trying Winduum Online

On StackBlitz or GithHub with basic examples how to use it in Vite and other frameworks.

Winduum is framework-agnostic, learn more on the About page.

Released under the MIT License.