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/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: 0

You can use any integer to adjust the position of the global CSS injection, which affects the CSS priority.

nuxt.config
export default {  tailwindcss: {    injectPosition: 0 // equal to nuxt.options.css.unshift(cssPath)    // injectPosition: Infinity, // equal to nuxt.options.css.push(cssPath)  }}

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