🍃 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/@screendirectives in any file: Less, SCSS, SASS, PostCSS, Stylus - 🎳 Support Utility Groups - e.g.
bg-gray-200 hover:(bg-gray-100 text-red-300)
This branch is for Windi CSS v3.0 support. Both windicss and windicss-webpack-plugin are release under @next tag at this moment.
Install them by:
npm i -D windicss-webpack-plugin@next windicss@next
# or
yarn add -D windicss-webpack-plugin@next windicss@nextIf you have access to modify the webpack.config.js directly, then you can do the following.
// webpack.config.js
import WindiCSS from 'windicss-webpack-plugin'
export default {
// ...
plugins: [
new WindiCSS
],
};// main.js
import 'windi.css'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>Read the documentation for more details.
MIT License © 2021 Harlan Wilton