Windi CSS
+
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) |  | | VSCode Extension | [windicss-intellisense](https://github.com/windicss/windicss-intellisense) |  | | Vite | [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss) |  | | Rollup | [rollup-plugin-windicss](https://github.com/windicss/vite-plugin-windicss/tree/main/packages/rollup-plugin-windicss) |  | | Webpack | [windicss-webpack-plugin](https://github.com/windicss/windicss-webpack-plugin) |  | | Nuxt | [nuxt-windicss](https://github.com/windicss/nuxt-windicss-module) |  | | Svelte | [svelte-windicss-preprocess](https://github.com/windicss/svelte-windicss-preprocess) |  | | StencilJS | [stencil-windicss](https://github.com/codeperate/stencil-windicss)Community |  | | Web APIs | [Web-APIs]()Community | 0.2.2 | ## CDN Links for Browser/JavaScipt IIFE APIs π - config: [https://unpkg.com/windicss-with-web-api@0.2.2/dist/config/index.iife.js](https://unpkg.com/windicss-with-web-api@0.2.2/dist/config/index.iife.js). - helpers: [https://unpkg.com/windicss-with-web-api@0.2.2/dist/helpers/index.iife.js](https://unpkg.com/windicss-with-web-api@0.2.2/dist/helpers/index.iife.js). - lib: [https://unpkg.com/windicss-with-web-api@0.2.2/dist/lib/index.iife.js](https://unpkg.com/windicss-with-web-api@0.2.2/dist/lib/index.iife.js). - plugin: [https://unpkg.com/windicss-with-web-api@0.2.2/dist/plugin/index.iife.js](https://unpkg.com/windicss-with-web-api@0.2.2/dist/plugin/index.iife.js). - utils: [https://unpkg.com/windicss-with-web-api@0.2.2/dist/utils/index.iife.js](https://unpkg.com/windicss-with-web-api@0.2.2/dist/utils/index.iife.js). #### Example Links [Live WindCSS in browser compilation] - **HTML demo link:** https://codesandbox.io/s/html-windicss-live-playground-b2kbh - **React demo link:** https://codesandbox.io/s/react-windicss-live-playground-5j7xr **UNPKG CDN link:** https://unpkg.com/browse/windicss-with-web-api@0.2.2/ ## 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).