windicss-webpack-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.2 • Public • Published

    windicss-webpack-plugin

    🍃 Windi CSS for webpack️
    Next generation utility-first CSS framework.

    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 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 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

    Keywords

    none

    Install

    npm i windicss-webpack-plugin

    DownloadsWeekly Downloads

    5,416

    Version

    1.6.2

    License

    MIT

    Unpacked Size

    70.2 kB

    Total Files

    15

    Last publish

    Collaborators

    • antfu
    • voorjaar
    • hannoeru
    • harlan_zw