Options

Configure Nuxt Tailwind easily with the `tailwindcss` property.


nuxt.config
export default {  // Defaults options  tailwindcss: {    cssPath: '~/assets/css/tailwind.css',    configPath: 'tailwind.config.js',    exposeConfig: false,    config: {},    injectPosition: 0,    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.

configPath

  • Default: 'tailwind.config.js'

Define the path of the Tailwind configuration 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.

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

npx tailwindcss init
If you customize the srcDir property in your nuxt.config file, you'll have to update the configPath value to '~~/tailwind.config.js' (~~ is the alias for rootDir) for the tailwind.config.js 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.

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.
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  }}