Getting Started

TIP

We are working on a fresh new docs with major docs rewrites and some pretty cool interactive playgrounds, stay tuned!

If you are interested to learn more about Windi CSS before trying it, check out the Introduction.

If you are looking for utilities, check out the utilities reference.

Integrations 💿

FrameworksPackageVersion
CLIBuilt-in
VSCode Extensionwindicss-intellisense
Vitevite-plugin-windicss
Rolluprollup-plugin-windicss
Webpackwindicss-webpack-plugin
Vue (Webpack)vue-windicss-preprocess
Nuxtnuxt-windicss
Sveltesvelte-windicss-preprocess

Usage 🚀

Windi CSS provides all utilities in Tailwind CSS, so usage is very similar.

You can use utility classes in your components and stylesheets as usual:

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">Erin Lindford</p>
      <p class="text-gray-500 font-medium">Product Engineer</p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
      Message
    </button>
  </div>
</div>

Directives are also supported:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
  padding-top: 1rem;
}

Contact ✉️

Please visit GitHub Issues to report bugs you find, and GitHub Discussions to make feature requests, or to get help.

Don't hesitate to ⭐️ star the project if you find it useful!