I've been a big fan of TailwindCSS for over half a year. I recently read about the incredible work done by the Wonderful WindiCSS team and especially the talented Mr. Anthony Fu.

He is a Core team member of Vue, Nuxt and Vite, and a valued Team member of Windi CSS

Features #

• ⚡️ It's FAST - 20~100x times faster than Tailwind on Vite
• 🧩 On-demand CSS utilities (Fully compatible with Tailwind CSS v2)
• 📦 On-demand native elements style resetting (preflight)
• 🔥 Hot module replacement (HMR)
• 🍃 Load configurations from tailwind.config.js
• 🤝 Framework-agnostic - Vue, React, Svelte and vanilla!
• 📄 CSS @apply / @screen directives transforms (also works for Vue SFC's <style>)
• 🎳 Support Variant Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)
• 😎 "Design in Devtools" - if you work this way in the traditional Tailwind, no reason we can't!

Check out the speed comparison between Windi CSS and Tailwind CSS on Vite.

---

Installation

git clone https://github.com/jjaimealeman/vite-vue3-windicss-starter.git

npm install

npm run dev

---

If you already know how to style with Tailwind, then Windi should be just as easy.

To Do

• Install plugins
• • aspect-ratio #
• • forms #
• • filters #
• • line-clamp #
• • scroll-snap #
• • typography #
• Create several template pages using Vue Router