Options

Configure Nuxt Tailwind with the tailwindcss property.

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.

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 CSS file, you can set cssPath to false.

export default {
  tailwindcss: {
    cssPath: false,
  }
}

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.

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

exposeConfig

• Default: false

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

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:

export default {
  tailwindcss: {
    exposeConfig: true,
    exposeLevel: 3
  }
}

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

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 specify the position explicitly.
• You can use any integer to specify absolute position in the array. This is the most fragile way, as it's easy to forget to adjust it when changing CSS settings.

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

• Default: see tailwind config section

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

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

Learn more about overwriting Tailwind config here.

viewer

• Default: true in development

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

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

export default {
  tailwindcss: {
    viewer: false
  }
}