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 future versions of TailwindCSS, specifically v3 and v4.

However, the v4 is still in development, so things can still change!

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";
@import "winduum/src/base/index.css";
@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";
@import "winduum/src/base/index.css";
@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";
@import "@/styles/base/index.css";
@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.

TailwindCSS

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

v3

To use TailwindCSS v3, make sure to add TailwindCSS imports at the end of your css file.

@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.

v4

To use TailwindCSS v4, you will have to import TailwindCSS and Winduum imports individually. Check out the example project on GitHub or learn more via official blog post.

WARNING

TailwindCSS v4 is still in alpha! The estimated release is end of 2024 or further.

@layer theme, base, components, utilities;

@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/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 "tailwindcss/utilities" layer(utilities);
@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()],
})

Most of the APIs are not documented yet, so you can follow Adam Wathan to learn more.

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.