Naturally Pacifist Marsupials

    This package has been deprecated

    Author message:

    WARNING: This project has been renamed to nuxt-windicss. Install using nuxt-windicss instead.

    nuxt-windicss-module
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published

    nuxt-windicss-module

    nuxt-windicss-module

    Windi CSS for Nuxt.js, it's fast! ⚡️
    a.k.a On-demand Tailwind CSS

    ⚡️ See speed comparison with Tailwind

    Features

    • ⚡️ It's FAST - 20~100x times faster than @nuxtjs/tailwindcss
    • 🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting
    • 🍃 Load configurations from tailwind.config.js
    • 📄 CSS @apply / @screen directives transforms
    • 🎳 Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)
    • 🧑‍🤝‍🧑 Compatible with nuxt-vite

    Install

    yarn add nuxt-windicss-module -D
    # npm i nuxt-windicss-module -D

    ⚠️ This module is a pre-release, please report any issues you find.

    Usage

    Within your nuxt.config.js add the following.

    // nuxt.config.js
    buildModules: [
      'nuxt-windicss-module',
    ],

    This module won't work with @nuxtjs/tailwindcss, you will need to remove it.

    buildModules: [
    -  '@nuxtjs/tailwindcss',
    ],

    This module will read from your root tailwind.config.js or windi.config.js config if present. See here for details.

    Migrating

    If you were previously using @nuxtjs/tailwindcss, please consult the documentation on migrating.

    Configuration

    • Default:
    windicss: {
      scan: {
        dirs: ['./'],
          exclude: ['.nuxt/**/*']
      },
      transformCSS: 'pre',
      preflight: {
        alias: {
          // add nuxt aliases
          'nuxt-link': 'a',
        }
      }
    }

    Hooks

    You can use the following nuxt hooks to modify the behaviour of the code.

    windicss:config

    • Arguments: options

    Modify the windicss configuration before it is passed to the webpack plugin.

    Caveats

    Scoped Style

    @media directive with scoped style can only work with css postcss scss but not sass, less nor stylus

    Credits

    • Windy team
    • @antfu Based on his Rollup / Vite implementation & his util package

    License

    MIT License © 2021 Harlan Wilton

    Keywords

    none

    Install

    npm i nuxt-windicss-module

    DownloadsWeekly Downloads

    0

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    7

    Last publish

    Collaborators

    • harlan_zw