https://github.com/windicss/windicss

Next generation utility-first CSS framework.
https://github.com/windicss/windicss

css css-compiler on-demand svelte tailwindcss utility-first vuejs windi-css

Last synced: 4 days ago
JSON representation

Next generation utility-first CSS framework.

• Host: GitHub
• URL: https://github.com/windicss/windicss
• Owner: windicss
• License: mit
• Created: 2020-12-29T07:17:33.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-06-21T23:11:31.000Z (6 months ago)
• Last Synced: 2024-10-29T09:20:54.958Z (about 1 month ago)
• Topics: css, css-compiler, on-demand, svelte, tailwindcss, utility-first, vuejs, windi-css
• Language: TypeScript
• Homepage: https://windicss.org
• Size: 2.31 MB
• Stars: 6,516
• Watchers: 30
• Forks: 180
• Open Issues: 224
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesomeLibrary - windicss - Next generation utility-first CSS framework. (语言资源库 / typescript)
• awesome-github-repos - windicss/windicss - Next generation utility-first CSS framework. (TypeScript)
• awesome - windicss/windicss - first CSS framework. (React / Style)
• awesome-list - windicss - first CSS framework. | windicss | 2910 | (TypeScript)

README

        


  ⚠️ Windi CSS is Sunsetting ⚠️


  We are sunsetting Windi CSS and we recommend new projects to seek for alternatives. Read the full blog post.









  




  Windi CSS





  

  

  

  

  


  

  




Next generation utility-first CSS framework.


[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).