Config

Default configuration

export default {
  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}`,
    `${srcDir}/app.config.{js,ts}`
  ]
}

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

Overwriting the configuration

You can extend the default configuration:

• with a tailwind.config file
• using the config option
• with the tailwindcss:config Nuxt hook

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.

import colors from 'tailwindcss/colors'

export default {
  theme: {
    extend: {
      colors: {
        primary: colors.green
      }
    }
  }
}

Learn more about the Tailwind config in their docs.

config option

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

import tailwindTypography from '@tailwindcss/typography'

export default {
  // ...
  tailwindcss: {
    config: {
      plugins: [tailwindTypography]
    }
  }
}

Hooks

tailwindcss:loadConfig

Passes any Tailwind configuration read by the module for each (extended) layer/path before merging all of them.

tailwindcss:config

Passes the resolved vanilla configuration read from all layers and paths with merging using defu.

tailwindcss:resolvedConfig

Passes the complete resolved configuration with all defaults from the full Tailwind config using resolveConfig.

Usage

You can use a Nuxt hook to manipulate the Tailwind configuration.

// ~/modules/nuxt-tailwind-mod/index.ts
import { defineNuxtModule, addTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('tailwindcss:config', function (tailwindConfig) {
      tailwindConfig.theme.colors.blue = '#fff'
    })

    nuxt.hook('tailwindcss:resolvedConfig', function (resolvedConfig) {
      console.log('This is the resulting config', JSON.stringify(resolvedConfig))
    })
  }
})

Learn more about Nuxt modules.

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

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:

import type { ModuleOptions } from '@nuxtjs/tailwindcss'

const config: ModuleOptions['config'] = {
  content (contentDefaults) {
    return [
      // add the defaults
      ...contentDefaults,

      // or filter only vue file patterns from defaults
      ...contentDefaults.filter((c) => c.endsWith('*.vue')),

      // add js and vue files for a directory
      './my-components/**/*.{js,vue}',

      // exclude test files if you keep them together with source
      contentDefaults.filter(
        c => c.endsWith('/**/*.{vue,js,ts}')
      ).map(
        c => c.replace('/**/*.{vue,js,ts}', '/**/!(*.{test,spec,story}).{vue,js,ts}')
      ),
    ]
  }
}

export default config

Safelisting classes

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

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:

export default {
  tailwindcss: {
    exposeConfig: true
  }
}

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'

Please be aware this adds ~19.5KB (~3.5KB) to the client bundle size. If you want to only import really specific parts of your tailwind config, you can enable imports for each property in the config:

export default {
  tailwindcss: {
    exposeConfig: {
      level: 4,
      alias: '#twcss' // if you want to change alias
    }
  }
}

// Import within properties for further tree-shaking
import screens from '#twcss/theme/screens'  // default import
import { _neutral } from '#twcss/theme/colors'  // named (with _ prefix)
import { _800 as slate800 } from '#twcss/theme/colors/slate'  // alias