Integration for Nuxt.js

Install

Add the package:

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

Then within your nuxt.config.js add the following:

// nuxt.config.js
export default {
  // ...
  buildModules: [
    'nuxt-windicss',
  ],
}

⚠️ 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:
export default {
  // ...
  windicss: {
    scan: {
      dirs: ['./'],
      exclude: [
        '.nuxt/**/*',
        '*.template.html',
        // Any classes added in app.html (that have not previously been referenced) will need to be added to the safelist
        'app.html',
      ],
    },
    transformCSS: 'pre',
    preflight: {
      alias: {
        // add nuxt aliases
        'nuxt-link': 'a',
      },
    },
  },
}

The nuxt module provides the same configuration API as the vite plugin.

Examples

Disable Preflight

nuxt.config.js

export default {
  // ...
  windicss: {
    preflight: false,
  },
}

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.