Install

You can use Winduum with or without TailwindCSS. Check out the About page to learn more about Winduum and its philosophy.

Winduum 2.x is using compatible naming for CSS custom properties that work with both current and old versions of TailwindCSS, specifically v4 and v3.

Get started

You can install Winduum via npm and use it in your Node.js project.
Or copy and paste the components from source and make it your own.

You can also mix both approaches, everything is possible!

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

npm

npm i winduum

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.

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

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

@import "winduum/src/theme/index.css" layer(theme);
@import "winduum/src/base/index.css" layer(base);
@import "winduum/src/components/button/index.css" layer(components);
@import "winduum/src/utilities/index.css" layer(components);

Or paste the source code to your project and make it your own!

@import "@/styles/theme/index.css" layer(theme);
@import "@/styles/base/index.css" layer(base);
@import "@/styles/components/button/index.css" layer(components);
@import "@/styles/utilities/index.css" layer(components);

With layer(components) you can use TailwindCSS variant classes, for example class="x-button lg:square" to make button square only from lg breakpoint. (Not wokring with TailwindCSS v4 currently)

TailwindCSS

It's optional but recommended to leverage the full functionality of the library!

v4

To use TailwindCSS v4, you will have to import TailwindCSS and Winduum imports individually.

@import "tailwindcss/theme.css" layer(theme);
@import "winduum/tailwindcss/theme/config/index.css" layer(theme);
@import "winduum/tailwindcss/theme/default.css" layer(theme);
@import "winduum/src/theme/dark.css" layer(theme);
@import "winduum/src/base/reset.css" layer(base);
@import "winduum/src/base/defaults.css" layer(base);

/* single imports for your components and utilities, or you can include them separately */
@import "winduum/src/components/index.css" layer(components);
@import "winduum/src/utilities/index.css" layer(utilities);

@import "winduum/tailwindcss/utilities/index.css";
@import "tailwindcss/utilities" layer(utilities);
@import "winduum/tailwindcss/variants/index.css";
@import "winduum/src/base/breakpoints.css";
@import "winduum/src/base/keyframes.css";
@import "winduum/src/base/transitions.css";

TailwindCSS v4 can be used in any project with Vite and works out of the box. No tailwind.config.js needed! All configuration is done in CSS!

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

v3

To use TailwindCSS v3, you will have to import TailwindCSS and Winduum imports individually.

@import "winduum/src/theme/index.css";
@import "winduum/src/base/index.css";
@import "winduum/src/components/index.css" layer(components);
@import "winduum/src/utilities/index.css" layer(components);
@import "winduum/tailwindcss/base/defaults.css";
@import "tailwindcss/base.css";
@import "tailwindcss/components.css";
@import "tailwindcss/utilities.css";
@import "tailwindcss/variants.css";

Follow the installation steps in TailwindCSS docs and include Winduum as a plugin, see Config for more info.

PostCSS or LightingCSS

For TailwindCSS v3 following PostCSS plugins are required. If you are using v4 the LightingCSS is used out of the box.

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

If you are not using TailwindCSS, you can use whatever you want, even no build step!

Stylelint

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

npm i stylelint stylelint-config-standard @stylistic/stylelint-config --save-dev

CSS Pre-processors

If you want to use pre-processors like sass or less you can. But if you want to use TailwindCSS be sure to follow a guide how to use it with Preprocessors

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/components/button/index.css" rel="stylesheet">

Trying Winduum Online

On StackBlitz or GitHub 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, more might come in the future!

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

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