2.options.md

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

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

::alert{type="warning"} 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.

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

::alert{type="info"}

By default, this module preconfigures the Tailwind configuration to make it work perfectly with Nuxt. Read more in the Tailwind Config section.

::

::alert{type="info"}

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:

export default {
  tailwindcss: {
    exposeConfig: true
    // or, for more customisation
    // exposeConfig: { level: 2, alias: '#tailwind-config' }
  }
}

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

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.

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

::alert{type="info"}

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:

export default {
  tailwindcss: {
    viewer: false
    // viewer: { endpoint: '/_tailwind' }
  }
}