Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/windicss/vite-plugin-windicss
🍃 Windi CSS for Vite ⚡️
https://github.com/windicss/vite-plugin-windicss
Last synced: about 1 month ago
JSON representation
🍃 Windi CSS for Vite ⚡️
- Host: GitHub
- URL: https://github.com/windicss/vite-plugin-windicss
- Owner: windicss
- License: mit
- Created: 2021-02-13T17:10:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-25T15:34:55.000Z (5 months ago)
- Last Synced: 2024-04-17T09:13:18.234Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 1.49 MB
- Stars: 849
- Watchers: 9
- Forks: 66
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-vite - vite-plugin-windicss - Windi CSS integration. (Plugins / Framework-agnostic Plugins)
- awesome-stars - windicss/vite-plugin-windicss - 🍃 Windi CSS for Vite ⚡️ (TypeScript)
- awesome-vite - vite-plugin-windicss - Windi CSS integration. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-windicss - Windi CSS integration. (Plugins / Framework-agnostic Plugins)
- awesome-viter - vite-plugin-windicss - Windi CSS integration. (Plugins / Framework-agnostic Plugins)
- awesome-windicss - vite-plugin-windicss
- awesome-vite - vite-plugin-windicss - Windi CSS integration. (Plugins / Framework-agnostic Plugins)
- awesome-github-repos - windicss/vite-plugin-windicss - 🍃 Windi CSS for Vite ⚡️ (TypeScript)
- awesome-vite - vite-plugin-windicss - Windi CSS integration. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-windicss - Windi CSS integration. (Plugins / Framework-agnostic Plugins)
README
⚠️ Windi CSS is Sunsetting ⚠️
We are sunsetting Windi CSS and we recommend new projects to seek for alternatives. Read the full blog post.
vite-plugin-windicss
Windi CSS for Vite, it's fast! ⚡️
## Features
- ⚡️ **It's FAST** - 20~100x times faster than Tailwind on Vite
- 🧩 On-demand CSS utilities (Fully compatible with Tailwind CSS v2)
- 📦 On-demand native elements style reseting (preflight)
- 🔥 Hot module replacement (HMR)
- 🍃 Load configurations from `tailwind.config.js`
- 🤝 Framework-agnostic - Vue, React, Svelte and vanilla!
- 📄 CSS `@apply` / `@screen` directives transforms (also works for Vue SFC's ``)
- 🎳 Support Variant Groups - e.g. `bg-gray-200 hover:(bg-gray-100 text-red-300)`
- 😎 ["Design in Devtools"](#design-in-devtools) - if you work this way in the traditional Tailwind, no reason we can't!
## Documentation
Read the [documentation](https://windicss.org/integrations/vite.html) for more details.
## New Features in v3.0
### [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
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>
```
#### Prefix
If you are concerned about naming confliction, you can add custom prefix to attributify mode by:
```ts
// windi.config.ts
export default {
attributify: {
prefix: 'w:',
},
}
```
```html
<button
w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
w:text="sm white"
w:font="mono light"
w:p="y-2 x-4"
w:border="2 rounded blue-200"
>
Button
</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
<p align="center">
<a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
<img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
</a>
</p>
## License
MIT License © 2021 [Anthony Fu](https://github.com/antfu)