Windi CSS Logo
 Windi CSS

Npm Version Total Downloads Build Status Coverage
Discord Chat

Next generation utility-first CSS framework.

If you are already familiar with Tailwind CSS, think about Windi CSS as an on-demanded alternative to Tailwind, which provides faster load times, fully compatible with Tailwind v2.0 and with a bunch of additional cool features.

[windi css]: https://windicss.org [website]: https://windicss.org [video comparison]: https://twitter.com/antfu7/status/1361398324587163648 ## Why Windi CSS? πŸ€” A quote from the author should illustrate his motivation to create [Windi CSS]: > When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS. - [@voorjaar](https://github.com/voorjaar) By scanning your HTML and CSS and generating utilities on demand, [Windi CSS] is able to provide [faster load times][video comparison] and a speedy HMR in development, and does not require purging in production. Read more about it in the [Introduction](https://windicss.org/guide/). ## Integrations Windi CSS provides first-class integrations for your favorite tools, select yours and get started. | Frameworks | Package | Version | | :-- | :-- | :-- | | CLI | [Built-in](https://windicss.org/guide/cli) | ![](https://img.shields.io/npm/v/windicss?label=&color=0EA5E9) | | VSCode Extension | [windicss-intellisense](https://github.com/windicss/windicss-intellisense) | ![](https://img.shields.io/visual-studio-marketplace/v/voorjaar.windicss-intellisense.svg?label=&color=1388bd) | | Vite | [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss) | ![](https://img.shields.io/npm/v/vite-plugin-windicss?label=&color=0EA5E9) | | Rollup | [rollup-plugin-windicss](https://github.com/windicss/vite-plugin-windicss/tree/main/packages/rollup-plugin-windicss) | ![](https://img.shields.io/npm/v/rollup-plugin-windicss?label=&color=1388bd) | | Webpack | [windicss-webpack-plugin](https://github.com/windicss/windicss-webpack-plugin) | ![](https://img.shields.io/npm/v/windicss-webpack-plugin?label=&color=1388bd) | | Nuxt | [nuxt-windicss](https://github.com/windicss/nuxt-windicss-module) | ![](https://img.shields.io/npm/v/nuxt-windicss?label=&color=1388bd) | | Svelte | [svelte-windicss-preprocess](https://github.com/windicss/svelte-windicss-preprocess) | ![](https://img.shields.io/npm/v/svelte-windicss-preprocess?label=&color=1388bd) | | StencilJS | [stencil-windicss](https://github.com/codeperate/stencil-windicss)Community | ![](https://img.shields.io/npm/v/@codeperate/stencil-windicss?label=&color=1388bd) | ## Plugins πŸ›  Check out [plugins available for windicss](https://github.com/windicss/plugins). ## Documentation πŸ“– Check [the documentation website][website]. ## Discussions We’re using [GitHub Discussions](https://github.com/windicss/windicss/discussions) as a place to connect with other members of our community. You are free to ask questions and share ideas, so enjoy yourself. ## Contributing If you're interested in contributing to windicss, please read our [contributing docs](https://github.com/windicss/windicss/blob/main/CONTRIBUTING.md) **before submitting a pull request**. ## Sponsors ## Backers ## License Distributed under the [MIT License](https://github.com/windicss/windicss/blob/main/LICENSE).