windicss-webpack-plugin

windicss-webpack-plugin

:leaves: Windi CSS for webpack️
^{Next generation utility-first CSS framework.}

Features

• 🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2)
• 📦 On-demand native elements style reseting
• 🔥 Hot module replacement (HMR)
• 🍃 Load configurations from tailwind.config.js
• 🤝 Framework-agnostic: Vue CLI, Nuxt, Next, UmiJS, etc!
• 📄 Use @apply / @screen directives in any file: Less, SCSS, SASS, PostCSS, Stylus
• 🎳 Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)

Documentation

Read the documentation for more details.

New Features in v3.0

Attributify Mode

Enabled it by

// windi.config.ts
export default {
  attributify: true
}

And use them as you would like:

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

Alias Config

// windi.config.ts
export default {
  alias: {
    'hstack': 'flex items-center',
    'vstack': 'flex flex-col',
    'icon': 'w-6 h-6 fill-current',
    'app': 'text-red',
    'app-border': 'border-gray-200 dark:border-dark-300',
  },
}

License

MIT License © 2021 Harlan Wilton