Configuration

Default configuration

When you install the module, the default Tailwind configuration would be equivalent to this:

{
  "theme": { "extend": {} },
  "content": {
    "files": [
      // all directories and extensions will correspond to your Nuxt config
      "{srcDir}/components/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/pages/**/*.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/plugins/**/*.{js,ts,mjs}",
      "{srcDir}/composables/**/*.{js,ts,mjs}",
      "{srcDir}/utils/**/*.{js,ts,mjs}",
      "{srcDir}/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}",
      "{srcDir}/app.config.{js,ts,mjs}",
      "{srcDir}/app/spa-loading-template.html"
    ]
  },
  "plugins": []
}

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

Overwriting the configuration

You can extend the default configuration:

• with a tailwind.config file
• using the config option
• using hooks, such as the tailwindcss:config

tailwind.config

If a tailwind.config file is present, it will be imported and used to overwrite the default configuration. You can pass custom configuration filepaths to the config option.

import colors from 'tailwindcss/colors'

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

Learn more about Tailwind configuration in the official documentation.

config option

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

import colors from 'tailwindcss/colors'

export default defineNuxtConfig({
  // ...
  tailwindcss: {
    config: {
      theme: {
        extend: {
          colors: { primary: colors.green }
        }
      }
    }
  }
})

Hooks

tailwindcss:loadConfig

Passes any Tailwind configuration read by the module 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 using resolveConfig.

Usage

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

// ~/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))
    })
  }
})

Ideally, you should provide an independent configuration template passed to the config module option. Refer to the module authoring example to see how it works.

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 defineNuxtConfig({
  // ...
  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 defineNuxtConfig({
  // ...
  tailwindcss: {
    exposeConfig: {
      level: 4,
    }
  }
})

// Import within properties for further tree-shaking
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

Tailwind CSS version

If you wish to use another version of Tailwind CSS (i.e., different from the one that would be installed with this module), you can simply do so using your package manager like so:

npm install -D tailwindcss@3.2.0