Options

Configure Nuxt Tailwind easily with the tailwindcss property.

nuxt.config.js
export default {
  // Defaults options
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config.js',
    jit: false,
    exposeConfig: false,
    config: {}
  }
}

cssPath

  • Default: '~/assets/css/tailwind.css'

Define the path of the Tailwind CSS file, if the file exists, it will be imported instead of the module's default..

nuxt.config.js
export default {
  tailwindcss: {
    cssPath: '~/assets/tailwind.css'
  }
}

This file will be directly injected as a global css for Nuxt, it supports css, sass, postcss, and more.

configPath

  • Default: 'tailwind.config.js'

Define the path of the Tailwind configuration file, if the file exists, it will be imported.

By default, the module already configure the Tailwind configuration to works perfectly with Nuxt. Read more in the Tailwind Config section.

You can create the default tailwind.config.js file by running:

npx tailwindcss init

Example of overwriting the location of the config path:

nuxt.config.js
export default {
  tailwindcss: {
    configPath: '~/config/tailwind.js'
  }
}

jit

  • Default: false

Activate Tailwind Just-In-Time package, learn more on https://github.com/tailwindlabs/tailwindcss-jit

When enabled, you should see this in your console when running nuxt dev:

ℹ Tailwind JIT activated 

exposeConfig

If you need resolved tailwind config in runtime, you can enable exposeConfig option in nuxt.config:

nuxt.config.js
export default {
  tailwindcss: {
    exposeConfig: true
  }
}

Learn more about it in the Referencing in the application section.

If you customized the srcDir property, you'll have to update configPath as configPath: '~~/tailwind.config.js' (~~ is the alias for rootDir) for the tailwind.config.js to be recognized properly. Read more in the Issue #114.

config

You can directly extend the Tailwind config with the config property, it uses defu.fn to overwrites the defaults.

nuxt.config.js
export default {
  tailwindcss: {
    config: {
      /* Extend the Tailwind config here */
      purge: {
        content: [
          'content/**/**.md'
        ]
      }
    }
  }
}

Learn more about overwriting Tailwind config here.

viewer

  • Default: true in development
  • Version: v3.4+

The Tailwind viewer is only available in development with nuxt dev.

The module internally use tailwind-config-viewer to setup the /_tailwind/ route.

To disable the viewer in development, set it to false:

nuxt.config.js
export default {
  tailwindcss: {
    viewer: false
  }
}
Edit this page on GitHub Updated at Thu, Apr 1, 2021