Vite 中文文档

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 <style> )
🎳* Support Variant Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)
😎* "Design in Devtools" - if you work this way in the traditional Tailwind, no reason we can't!

Documentation


Read the documentation for more details.

New Features in v3.0


Attributify Mode


Enabled it by

  1. ``` ts
  2. // windi.config.ts
  3. export default {
  4.   attributify: true,
  5. }
  6. ```

And use them as you would like:

  1. ``` html
  2. <button 
  3.   bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  4.   text="sm white"
  5.   font="mono light"
  6.   p="y-2 x-4"
  7.   border="2 rounded blue-200"
  8. >
  9.   Button
  10. </button>
  11. ```

Prefix


If you are concerned about naming confliction, you can add custom prefix to attributify mode by:

  1. ``` ts
  2. // windi.config.ts
  3. export default {
  4.   attributify: {
  5.     prefix: 'w:',
  6.   },
  7. }
  8. ```

  1. ``` html
  2. <button 
  3.   w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  4.   w:text="sm white"
  5.   w:font="mono light"
  6.   w:p="y-2 x-4"
  7.   w:border="2 rounded blue-200"
  8. >
  9.   Button
  10. </button>
  11. ```

Alias Config


  1. ``` ts
  2. // windi.config.ts
  3. export default {
  4.   alias: {
  5.     'hstack': 'flex items-center',
  6.     'vstack': 'flex flex-col',
  7.     'icon': 'w-6 h-6 fill-current',
  8.     'app': 'text-red',
  9.     'app-border': 'border-gray-200 dark:border-dark-300',
  10.   },
  11. }
  12. ```

Sponsors


License


MIT License © 2021 Anthony Fu