windicss-webpack-plugin
v1.8.0
Published
<h1 align='center'>windicss-webpack-plugin</h1>
Downloads
19,559
Readme
⚠️ Consider using UnoCSS instead, it's a rebuild of the WindiCSS core with a lot of improvements and new features.
Features
- 🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2) and preflights
- 🍃 Load configurations from
tailwind.config.js
- 🤝 Framework-agnostic: Vue CLI, Nuxt, Next, UmiJS, etc!
- 📄 Use directives in any CSS (SCSS, LESS, etc)
@apply
,@variants
,@screen
,@layer
,theme()
, - 🎳 Support Utility Groups - e.g.
bg-gray-200 hover:(bg-gray-100 text-red-300)
Documentation
Read the documentation for more details.
New Webpack Plugin Features
Design in DevTools mode
Add the import with your existing windi imports and you'll have autocompletion in your Chrome DevTools! See "Design in DevTools" for more information.
import 'virtual:windi-devtools'
Thanks await-ovo!
New Windi v3.0 Features
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',
},
}
Sponsors
License
MIT License © 2022 - Present Harlan Wilton