Config
This module comes with a default Tailwind configuration file to provide the best possible user experience.
Default configuration
{ 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:
- 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 defaultTheme from 'tailwindcss/defaultTheme'export default { 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:
import tailwindTypography from '@tailwindcss/typography'export default { // ... tailwindcss: { config: { plugins: [tailwindTypography] } }}
tailwindcss:config
hook
You can use a Nuxt hook to extend the Tailwind configuration:
// ~/modules/nuxt-tailwind-typo/index.tsimport { 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.
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
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:
export default { content (contentDefaults) { return [...contentDefaults.filter((c) => c.endsWith('*.vue')), './my-components/**/*.vue', `${srcDir}/themes/**/*.js`] }}
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:
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, // exposeLevel: 1, // determines tree-shaking (optional) }}
Then import where needed from #tailwind-config
:
// Import fully resolved configimport tailwindConfig from '#tailwind-config'// Import only part which is required to allow tree-shakingimport { theme } from '#tailwind-config'// Import within properties for further tree-shaking (based on exposeLevel)import screens from '#tailwind-config/theme/screens' // default importimport { _neutral } from '#tailwind-config/theme/colors' // named (with _ prefix)import { _800 as slate800 } from '#tailwind-config/theme/colors/slate' // alias
~19.5KB
(~3.5KB
) to the client bundle size.#tailwind-config/*
alias.