Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/windicss/windicss-webpack-plugin

🍃 Windi CSS for webpack ⚡
https://github.com/windicss/windicss-webpack-plugin

webpack windicss

Last synced: 2 months ago
JSON representation

🍃 Windi CSS for webpack ⚡

Host: GitHub
URL: https://github.com/windicss/windicss-webpack-plugin
Owner: windicss
Created: 2021-02-20T03:24:09.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2023-09-14T11:44:28.000Z (over 1 year ago)
Last Synced: 2024-10-30T03:25:31.635Z (2 months ago)
Topics: webpack, windicss
Language: TypeScript
Homepage: https://windicss.org/integrations/webpack.html
Size: 2.84 MB
Stars: 79
Watchers: 4
Forks: 19
Open Issues: 16
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

windicss-webpack-plugin

:leaves: Windi CSS for webpack️

^{Next generation utility-first CSS framework.}

⚠️ Consider using [UnoCSS](https://github.com/unocss/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 🐦}

## 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](https://windicss.org/features/directives.html) 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](https://windicss.org/integrations/webpack.html) 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"](https://windicss.org/integrations/vite.html#design-in-devtools) for
more information.

```js
import 'virtual:windi-devtools'
```

Thanks [await-ovo](https://github.com/await-ovo)!

## New Windi v3.0 Features

### [Attributify Mode](https://windicss.org/posts/v30.html#attributify-mode)

Enabled it by

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

And use them as you would like:

```html

Button

```

### [Alias Config](https://windicss.org/posts/v30.html#alias-config)

```ts
// 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