/vite-windi-tailwind-jit-compare

Windi CSS vs Tailwind CSS JIT on Vite

Primary LanguageVue

Windi CSS vs Tailwind CSS JIT on Vite

yarn
yarn dev

to start both servers

http://localhost:3100/ - Windi CSS
http://localhost:3200/ - Tailwind CSS JIT

edit App.vue will trigger updates for both servers.

The current source file is pretty small and simple, I would love to receive contributions of snippets for a more complex example. Thanks.

Configuration

  • Use yarn workspaces hoist Vite common deps to make sure they are using the exact same version.
  • All package versions are fixed with a shared lockfile.
  • Both configure enables watcher for only the vue extension.
  • Tailwind JIT:
    • Configured by the guide from the Tailwind JIT README.
    • Without autoprefixer installed (Windi CSS have the feature but does not need it)
  • Windi CSS: