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

Readme

Keywords

none

Package Sidebar

Install

npm i nuxt-windicss-module

Weekly Downloads

0

Version

0.2.3

License

MIT

Unpacked Size

108 kB

Total Files

7

Last publish

Collaborators

  • harlan_zw