Config

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

Default configuration

tailwind.config.js
{
  theme: {},
  plugins: [],
  content: [
    `${srcDir}/components/**/*.{vue,js,ts}`,
    `${srcDir}/layouts/**/*.vue`,
    `${srcDir}/pages/**/*.vue`,
    `${srcDir}/composables/**/*.{js,ts}`,
    `${srcDir}/plugins/**/*.{js,ts}`,
    `${srcDir}/utils/**/*.{js,ts}`,
    `${srcDir}/App.{js,ts,vue}`,
    `${srcDir}/app.{js,ts,vue}`,
    `${srcDir}/Error.{js,ts,vue}`,
    `${srcDir}/error.{js,ts,vue}`
  ]
}

You can learn more about the Tailwind configuration and the content configuration in Tailwind docs.

Overwriting the configuration

You can extend the default configuration:

The tailwind.config file and config options are subject to the merging strategy.

tailwind.config

If a tailwind.config file is present, it will be imported and used to overwrite the default configuration. All of the following file extensions will work by default: .js, .cjs, .mjs, and .ts. When not using the .cjs file extension, you need to use ESM syntax (see #549).

You can configure the path with the configPath option.

This config has the highest priority to overwrite the defaults and tailwindcss.config.
tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'
export default {
  theme: {
    extend: {
      colors: {
        primary: defaultTheme.colors.green
      }
    }
  }
}
tailwind.config.ts
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
export default <Partial<Config>>{
    theme: {
    extend: {
      colors: {
        primary: defaultTheme.colors.green
      }
    }
  }
}
tailwind.config.cjs
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: defaultTheme.colors.green
      }
    }
  }
}

Learn more about the Tailwind config in their docs.

config option

You can also use your nuxt.config to set your Tailwind config with the tailwindcss.config property:

nuxt.config
import tailwindTypography from '@tailwindcss/typography'
export default {
  // ...
  tailwindcss: {
    config: {
      plugins: [tailwindTypography]
    }
  }
}
This config has less priority over the tailwind.config.js file.

tailwindcss:config hook

This is an advanced usage section and intended primarily for Nuxt modules authors.

You can use a Nuxt hook to extend the Tailwind configuration:

// ~/modules/nuxt-tailwind-typo/index.ts
import { defineNuxtModule } from '@nuxt/kit'
import tailwindTypography from '@tailwindcss/typography'
export default defineNuxtModule({
  meta: {
    name: 'nuxt-tailwind-typo'
  },
  setup (options, nuxt) {
    nuxt.hook('tailwindcss:config', function (tailwindConfig) {
      tailwindConfig.plugins.push(tailwindTypography)
    })
  }
})

Learn more about Nuxt modules.

This hook can be asynchronous (using async/await) and is called after merging the configurations and right before calling the PostCSS Tailwind plugin.

Merging strategy

The provided config will be merged using defu's array function merger.

When assigning an array to the content property, it will be concatenated with the default value.

Example

tailwind.config.js
export default {
  content: [
    'content/**/*.md'
  ]
}

The content option will be:

[
  'components/**/*.{vue,js,ts}',
  'layouts/**/*.vue',
  'pages/**/*.vue',
  'composables/**/*.{js,ts}',
  'plugins/**/*.{js,ts}',
  'App.{js,ts,vue}',
  'app.{js,ts,vue}',
  'Error.{js,ts,vue}',
  'error.{js,ts,vue}',
  'content/**/*.md'
]

If you want to fully overwrite its value, you can use a function that receives the default value:

tailwind.config.js
export default {
  content (contentDefaults) {
    return [...contentDefaults.filter((c) => c.endsWith('*.vue')), './my-components/**/*.vue', `${srcDir}/themes/**/*.js`]
  }
}
This merging strategy of with a function only applies to plugins and content since the default value is defined as an Array.

Safelisting classes

If you need to safelist classes and avoid the content purge system, you need to specify the safelist option:

tailwind.config.js
module.exports = {
  // Safelisting some classes to avoid content purge
  safelist: [
    'safelisted',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ]
}

Referencing in the application

It can often be useful to reference Tailwind configuration values at runtime, e.g. to access some of your theme values when dynamically applying inline styles in a component.

If you need resolved Tailwind config at runtime, you can enable the exposeConfig option:

nuxt.config
export default {
  tailwindcss: {
    exposeConfig: true,
    // exposeLevel: 1,  // determines tree-shaking (optional)
  }
}

Then import where needed from #tailwind-config:

// Import fully resolved config
import tailwindConfig from '#tailwind-config'
// Import only part which is required to allow tree-shaking
import { theme } from '#tailwind-config'
// Import within properties for further tree-shaking (based on exposeLevel)
import screens from '#tailwind-config/theme/screens'  // default import
import { _neutral } from '#tailwind-config/theme/colors'  // named (with _ prefix)
import { _800 as slate800 } from '#tailwind-config/theme/colors/slate'  // alias
Please be aware this adds ~19.5KB (~3.5KB) to the client bundle size.
Import types are only provided through the #tailwind-config/* alias.
Table of Contents