Tailwind Config

@nuxtjs/tailwindcss configures the Tailwind configuration to have the best user experience as possible by default.

Default Configuration

{
  theme: {},
  variants: {},
  plugins: [],
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
      // TypeScript
      'plugins/**/*.ts',
      'nuxt.config.ts'
    ]
  }
}

The file is available on GitHub

You can learn more about the Tailwind configuration and the purge option on Tailwind docs.

Overwriting the configuration

You can extend the default configuration:

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

tailwind.config.js

If a tailwind.config.js file is present, it will be imported and used to overwrite the default configuration.

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
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: defaultTheme.colors.green
      }
    }
  }
}

Learn more about the Tailwind config on their docs.

config option

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

nuxt.config.js
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 advanced usage and mostly used for Nuxt modules authors.

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

// ~/modules/nuxt-tailwind-typo/index.js
import tailwindTypography from '@tailwindcss/typography'

export default function () {
  this.nuxt.hook('tailwindcss:config', function (tailwindConfig) {
    tailwindConfig.plugins.push(tailwindTypography)
  })
}

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 giving an array to the purge.content, it will concat with the default value.

Example

tailwind.config.js
module.exports = {
  purge: {
    content: [
      'content/**/*.md'
    ]
  }
}

The purge.content option will be:

[
  'components/**/*.vue',
  'layouts/**/*.vue',
  'pages/**/*.vue',
  'plugins/**/*.js',
  'nuxt.config.js',
  'content/**/*.md'
]

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

tailwind.config.js
module.exports = {
  purge: {
    content (contentDefaults) {
      return contentDefaults.map(file => file.replace('.js', '.ts'))
    }
  }
}

The purge.content option will be:

[
  'components/**/*.vue',
  'layouts/**/*.vue',
  'pages/**/*.vue',
  'plugins/**/*.ts',
  'nuxt.config.ts'
]

This merging strategy of with a function only applies to plugins and purge.content since the default value is defined as an Array

Referencing in the application

It can often be useful to reference tailwind configuration values in runtime. For example 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.js
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.