Installation

Windi CSS provides first-class integrations for your favorite tools. Select yours and get started.

Build Tools

Support for build-tools are framework-agnostic. They work for most frameworks without specific configurations.

<Integrations class="mb-5" :items="[ { title: 'Vite', link: '/integrations/vite', logo: 'vite', }, { title: 'Webpack', link: '/integrations/webpack', logo: 'webpack', }, { title: 'Rollup', link: '/integrations/rollup', logo: 'rollup', }, { title: 'PostCSS', link: '/integrations/postcss', logo: 'postcss', }, { title: 'CLI', link: '/integrations/cli', logo: 'cli', }, ]"/>

Frameworks

In addition to general build-tools support, we also provide integrations for the following frameworks that offer out-of-the-box experience.

<Integrations class="mb-5" :items="[ { title: 'Nuxt', link: '/integrations/nuxt', logo: 'nuxt', }, { title: 'Vue CLI', link: '/integrations/vue-cli', logo: 'vue', }, { title: 'Gridsome', link: '/integrations/gridsome', logo: 'gridsome', }, /* { title: 'Next.js', link: '/integrations/nextjs', logo: 'nextjs', }, */ { title: 'Svelte', link: '/integrations/svelte', logo: 'svelte', }, ]"/>

Editors

<Integrations class="mb-5" :items="[ { title: 'VS Code', link: '/editors/vscode', logo: 'vscode', }, { title: 'WebStorm', link: '/editors/webstorm', logo: 'webstorm', wip: true }, ]"/>

API

<Integrations class="mb-5" :items="[ { title: 'JavaScript', link: '/integrations/javascript', logo: 'javascript', }, ]"/>

<div class="pb-5"></div>

Didn't see the framework you use? Submit a framework request on GitHub.