Getting Started

Configuration

Configure Nuxt Tailwind with the `tailwindcss` property.
nuxt.config.ts
export default {
  // Defaults options
  tailwindcss: {
    cssPath: ['~/assets/css/tailwind.css', { injectPosition: "first" }],
    configPath: 'tailwind.config',
    exposeConfig: {
      level: 2
    },
    config: {},
    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.ts
export default defineNuxtConfig({
  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.

nuxt.config.ts
export default defineNuxtConfig({
  tailwindcss: {
    cssPath: false,
  }
})
When set to false, note that HMR for tailwindcss will be broken (hard refresh needed).

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.ts
export default defineNuxtConfig({
  css: [
    'assets/low-priorty.pcss',
    'assets/high-priorty.pcss'
  ],
  tailwindcss: {
    cssPath: ['~/assets/css/tailwind.css', { injectPosition: 'last' }],
    // cssPath: [
    //   false,   // can also use when cssPath: false
    //   {
    //     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.

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.

nuxt.config.ts
export default defineNuxtConfig({
  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.
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:

nuxt.config.ts
export default defineNuxtConfig({
  tailwindcss: {
    exposeConfig: true
    // or, for more customisation
    // exposeConfig: { level: 2, alias: '#tailwind-config' }
  }
})

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 overwrite the defaults.

nuxt.config.ts
export default defineNuxtConfig({
  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.ts
export default defineNuxtConfig({
  tailwindcss: {
    viewer: false
    // viewer: { endpoint: '/_tailwind', exportViewer: true }
  }
})

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

editorSupport

  • Default: false

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

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

Installation

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

Config

This module comes with a default Tailwind configuration file to provide the best possible user experience.