:leaves: Windi CSS for webpack️
Next generation utility-first CSS framework.
⚠️ Consider using UnoCSS instead, it's a rebuild of the WindiCSS core with a lot of improvements and new features.
Status: Stable - Maintenance only Made possible by my Sponsor Program 💖 Follow me @harlan_zw 🐦 |
tailwind.config.js
@apply
, @variants
, @screen
, @layer
, theme()
,bg-gray-200 hover:(bg-gray-100 text-red-300)
Read the documentation for more details.
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!
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>
// 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',
},
}
MIT License © 2022 - Present Harlan Wilton