Options

You can configure the module by using the tailwindcss property in the nuxt.config.js:

nuxt.config.js
export default {
  // Defaults options
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config.js',
    exposeConfig: false,
    config: {}
  }
}

cssPath

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

Define the path of the Tailwind CSS file, if the file exists, it will be imported instead of the module's default..

nuxt.config.js
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, if the file exists, it will be imported.

By default, the module already configure the Tailwind configuration to works perfectly with Nuxt. Read more in the Tailwind Config section.

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

npx tailwindcss init

Example of overwriting the location of the config path:

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

exposeConfig

If you need resolved tailwind config in runtime, you can enable exposeConfig option in nuxt.config:

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

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

config

You can directly extend the Tailwind config with the config property, it uses defu.fn to overwrites the defaults.

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

Learn more about overwriting Tailwind config here.