Module Options - Tailwind CSS module for Nuxt

nuxt.config

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  // Defaults options
  tailwindcss: {
    cssPath: ['~/assets/css/tailwind.css', { injectPosition: "first" }],
    config: {},
    viewer: true,
    exposeConfig: false,
  }
})

`config`

Default: {}

You can directly extend the Tailwind configuration with the config property. Ideally, you should use a tailwind.config, but you can pass (an array of) an object with JSON-serializable values, or a path to a configuration file. The module uses defu to merge all configurations.

nuxt.config

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    config: {
      content: [
        'content/**/**.md'
      ]
    },
    // config: './tw-config.mts',
    // config: [
    //   { theme: { extend: { primary: 'red' } } },
    //   './tw-config.mts',
    //   { content: ['content/**/*.md'] },
    // ]
  }
})

Learn more about overwriting the configuration in the Tailwind CSS Configuration section.

`cssPath`

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

You can define the path of the Tailwind CSS file that is added to nuxt.options.css. If the file does not exist, the module's default CSS file will be imported instead.

nuxt.config

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
  }
})

To adjust the position of the global CSS injection, affecting the CSS priority, you can provide configuration to cssPath through the second element of an array like so:

nuxt.config

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  css: [
    'assets/low-priorty.pcss',
    'assets/high-priorty.pcss'
  ],
  tailwindcss: {
    cssPath: [
      '~/assets/css/tailwind.css',
      {
        injectPosition: 'last'
    //  injectPosition: {
    //    // 'low-priority' will have lower priority than Tailwind stylesheet,
    //    // while 'high-priorty' will override it
    //    after: 'assets/low-priorty.pcss'
    //  }
    //  injectPosition: 'first'   // default, equal to nuxt.options.css.unshift(cssPath)
    //  injectPosition: 'last'    // equal to nuxt.options.css.push(cssPath)
    //  injectPosition: 1         // after 'low-priority.pcss'
      },
    ],
  }
})

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.

If you don't want to inject the CSS file, you can set cssPath to false.

nuxt.config

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: { cssPath: false }
})

`viewer`

Default: true in development

This module internally uses tailwind-config-viewer to provide with the config viewer on Nuxt DevTools or the /_tailwind/ route. You can edit the endpoint by viewer.endpoint and if you'd like to export the viewer as a static asset during build, you can set viewer.exportViewer to true (it will internally run npx tailwind-config-viewer export).

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

nuxt.config

export default defineNuxtConfig({
  tailwindcss: {
    viewer: { endpoint: '/_tailwind', exportViewer: true },
    // viewer: false
  }
})

`exposeConfig`

Default: false

As a solution to referencing the configuration in JavaScript, if you need to resolve the Tailwind configuration in runtime, you can enable the exposeConfig option:

nuxt.config

export default defineNuxtConfig({
  tailwindcss: {
    exposeConfig: true
    // exposeConfig: { level: 2 }
  }
})

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

`editorSupport`

Default: false

You can take advantage of some DX utilities this modules provide to you as you develop your Nuxt application with Tailwind CSS. Read more in Editor Support.

nuxt.config

export default defineNuxtConfig({
  tailwindcss: {
    editorSupport: true
    // editorSupport: { autocompleteUtil: { as: 'tailwindClasses' } }
  }
})

Installation

Using Tailwind CSS in your Nuxt project is only one command away.

Configuration

Configure with sensible defaults, or extend it.