windicss-webpack-plugin
π 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