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.

npm

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.

• autoprefixer
• tailwindcss
• postcss-nesting
• postcss-import
• postcss-custom-media

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

• css-has-pseudo

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.

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

Trying Winduum Online

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

• vite
• vite + vue
• vite + react
• vite + svelte
• vite + solid
• vite + qwik
• vite + lit

• astro
• nuxt
• next
• htmx
• vite + sass
• vite + less

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

Do you need ready to use components? Here are components ready to copy & paste. For now there are only a few, it's still in development.

• winduum/winduum-vue 
• winduum/winduum-react 

Each component in docs includes example usage in html and also in vue and jsx.