Options

Configure Nuxt Tailwind with the tailwindcss property.

nuxt.config.ts
export default {
  // Defaults options
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config',
    exposeConfig: false,
    exposeLevel: 2,
    config: {},
    injectPosition: 'first',
    viewer: true,
  }
}

cssPath

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

Define the path of the Tailwind CSS file. If the file does not exist, the module's default CSS file will be imported instead.

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

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

If you don't want to inject the CSS file, you can set cssPath to false.

nuxt.config
export default {
  tailwindcss: {
    cssPath: false,
  }
}
When set to false, note that HMR for tailwindcss will be broken (hard refresh needed).

configPath

  • Default: 'tailwind.config'

Define the path of the Tailwind configuration file. The extension can be omitted, in which case it will try to find a .js, .cjs, .mjs, or .ts file.

nuxt.config
export default {
  tailwindcss: {
    configPath: '~/config/tailwind.js'
  }
}
By default, this module preconfigures the Tailwind configuration to make it work perfectly with Nuxt. Read more in the Tailwind Config section.
If you customize the srcDir property in your nuxt.config file, you'll have to update the configPath value to '~~/tailwind.config' (~~ is the alias for rootDir) for the tailwind.config file to be recognized properly. Read more in the Issue #114.

exposeConfig

  • Default: false

If you need to resolve the tailwind config in runtime, you can enable the exposeConfig option:

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

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

exposeLevel

  • Default: 2

If you want to only import really specific parts of your tailwind config, you can enable imports for each property in the config:

nuxt.config
export default {
  tailwindcss: {
    exposeConfig: true,
    exposeLevel: 3
  }
}

This is only relevant when exposeConfig is set to true. Setting exposeLevel to ≤ 0 will only expose root properties.

It is unlikely for exposeLevel to ever be over 4 - the usual depth of a Tailwind config. A higher value is also likely to increase boot-time and disk space in dev. Refer to the Nuxt Virtual File System to see generated files.
Named exports for properties below root options are prefixed with _ (_colors, _900, _2xl) to ensure safe variable names. You can use default imports to provide any identifier or rename named imports using as. Properties with unsafe variable names (spacing['1.5'], height['1/2'], keyframes.ping['75%, 100%']) do not get exported individually.

injectPosition

  • Default: 'first'

This option lets you adjust the position of the global CSS injection, which affects the CSS priority. You can use multiple formats to define the position:

  • Use 'first' and 'last' literals to make Tailwind CSS first or last respectively. First position has the lowest priority, last position overrides everything and hence has the highest priority.
  • Use { after: 'some/existing/file.css' } to explicitly specify the position.
  • You can use any integer to specify absolute position in the array. This approach is less stable, as it can be easy to forget to adjust it when changing CSS settings.
nuxt.config
export default {
  css: [
    'assets/low-priorty.pcss',
    'assets/high-priorty.pcss'
  ],
  tailwindcss: {
    injectPosition: { 
        // 'low-priority' will have lower priority than Tailwind stylesheet, 
        // while 'high-priorty' will override it
        after: 'assets/low-priorty.pcss'
    }
    // injectPosition: 'first'   // equal to nuxt.options.css.unshift(cssPath)
    // injectPosition: 'last'    // equal to nuxt.options.css.push(cssPath)
    // injectPosition: 1         // after 'low-priority.pcss'
  }
}

Learn more about overwriting Tailwind config here.

config

You can directly extend the Tailwind config with the config property. It uses defu.fn to overwrite the defaults.

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

Learn more about overwriting Tailwind config here.

viewer

  • Default: true in development
The Tailwind viewer is only available during development (run with nuxi dev command).

This module internally uses tailwind-config-viewer to set up the /_tailwind/ route.

To disable the viewer during development, set its value to false:

nuxt.config
export default {
  tailwindcss: {
    viewer: false
  }
}