0
# Nuxt Tailwind CSS
1
2
The @nuxtjs/tailwindcss module provides seamless integration of Tailwind CSS into Nuxt applications with zero configuration required. It includes CSS Nesting support via postcss-nesting, a configuration viewer for discovering Tailwind config and colors, the ability to reference Tailwind config directly in applications, and extensibility through Nuxt module hooks. The module supports both Nuxt 2 and Nuxt 3, offers automatic setup with intelligent defaults, and enables developers to quickly prototype and build production-ready applications using Tailwind's utility-first CSS framework within the Nuxt ecosystem.
3
4
## Package Information
5
6
- **Package Name**: @nuxtjs/tailwindcss
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install --save-dev @nuxtjs/tailwindcss`
10
11
## Core Imports
12
13
```typescript
14
// Main module - used in nuxt.config
15
export default defineNuxtModule<ModuleOptions>;
16
export type { ModuleOptions, ModuleHooks };
17
18
// Configuration utilities
19
import { defineConfig } from '@nuxtjs/tailwindcss/config';
20
21
// Configuration merging
22
import configMerger from '@nuxtjs/tailwindcss/merger';
23
24
// Configuration context (internal use)
25
import '@nuxtjs/tailwindcss/config-ctx';
26
27
// Runtime utilities (when editorSupport is enabled)
28
import { autocompleteUtil as tw } from '#imports';
29
```
30
31
For CommonJS:
32
33
```javascript
34
// Main module
35
const tailwindModule = require('@nuxtjs/tailwindcss');
36
37
// Configuration utilities
38
const { defineConfig } = require('@nuxtjs/tailwindcss/config');
39
40
// Configuration merging
41
const configMerger = require('@nuxtjs/tailwindcss/merger');
42
```
43
44
## Basic Usage
45
46
Add the module to your Nuxt configuration:
47
48
```typescript
49
// nuxt.config.ts
50
export default defineNuxtConfig({
51
modules: ['@nuxtjs/tailwindcss'],
52
tailwindcss: {
53
// Module options
54
cssPath: '~/assets/css/tailwind.css',
55
configPath: 'tailwind.config',
56
exposeConfig: false,
57
viewer: true,
58
}
59
});
60
```
61
62
Create a Tailwind configuration file:
63
64
```typescript
65
// tailwind.config.ts
66
import { defineConfig } from '@nuxtjs/tailwindcss/config';
67
68
export default defineConfig({
69
content: ['./pages/**/*.vue', './components/**/*.vue'],
70
theme: {
71
extend: {
72
colors: {
73
primary: '#3b82f6'
74
}
75
}
76
}
77
});
78
```
79
80
## Architecture
81
82
The Nuxt Tailwind CSS module is built around several key components:
83
84
- **Module Core**: Main Nuxt module that integrates Tailwind CSS into the build process
85
- **Configuration System**: Handles config loading, merging, and resolution across Nuxt layers
86
- **Development Tools**: Config viewer and editor support for enhanced development experience
87
- **Runtime Integration**: Optional runtime access to resolved Tailwind configuration
88
- **PostCSS Integration**: Automatic PostCSS plugin setup with CSS nesting support
89
90
## Capabilities
91
92
### Module Configuration
93
94
Core module configuration for integrating Tailwind CSS into Nuxt applications. Controls CSS file handling, configuration loading, and feature enablement.
95
96
```typescript { .api }
97
interface ModuleOptions {
98
configPath: string | string[];
99
cssPath: string | false | [string, { injectPosition: InjectPosition }];
100
config: Partial<TWConfig> | string | Array<Partial<TWConfig> | string>;
101
viewer: boolean | ViewerConfig;
102
exposeConfig: boolean | ExposeConfig;
103
quiet: boolean;
104
editorSupport: boolean | EditorSupportConfig;
105
experimental?: Partial<ExperimentalOptions>;
106
disableHMR?: boolean;
107
}
108
109
type InjectPosition = 'first' | 'last' | number | { after: string };
110
```
111
112
[Module Configuration](./module-configuration.md)
113
114
### Configuration Utilities
115
116
Utilities for creating and managing Tailwind CSS configurations with Nuxt-specific enhancements and context management.
117
118
```typescript { .api }
119
function defineConfig(config: Partial<TWConfig>): Partial<TWConfig>;
120
121
function configMerger(
122
base: Partial<TWConfig> | null | undefined,
123
...defaults: Array<Partial<TWConfig> | null | undefined>
124
): Partial<TWConfig>;
125
```
126
127
[Configuration Utilities](./configuration-utilities.md)
128
129
### Development Tools
130
131
Development-time features including configuration viewer, editor support, and Hot Module Reload for enhanced developer experience.
132
133
```typescript { .api }
134
interface ViewerConfig {
135
endpoint: `/${string}`;
136
exportViewer: boolean;
137
}
138
139
interface EditorSupportConfig {
140
autocompleteUtil: boolean | { as: string };
141
generateConfig: boolean;
142
}
143
144
function autocompleteUtil<T extends TemplateStringsArray | string>(
145
tailwindClasses: T
146
): T;
147
```
148
149
[Development Tools](./development-tools.md)
150
151
### Runtime Configuration
152
153
Optional runtime access to resolved Tailwind configuration for dynamic styling and configuration introspection.
154
155
```typescript { .api }
156
interface ExposeConfig {
157
alias: string;
158
level: number;
159
write?: boolean;
160
}
161
```
162
163
[Runtime Configuration](./runtime-configuration.md)
164
165
### Module Hooks
166
167
Extensibility hooks for other Nuxt modules to modify Tailwind configuration and behavior during the build process.
168
169
```typescript { .api }
170
interface ModuleHooks {
171
'tailwindcss:config': (tailwindConfig: Partial<TWConfig>) => void;
172
'tailwindcss:loadConfig': (
173
tailwindConfig: Partial<TWConfig> | undefined,
174
configPath: string,
175
index: number,
176
configPaths: string[]
177
) => void;
178
'tailwindcss:resolvedConfig': (
179
tailwindConfig: ReturnType<typeof import('tailwindcss/resolveConfig')>,
180
oldTailwindConfig: TWConfig | undefined
181
) => void;
182
}
183
```
184
185
[Module Hooks](./module-hooks.md)
186
187
## Types
188
189
```typescript { .api }
190
type TWConfig = import('tailwindcss').Config;
191
192
type Arrayable<T> = T | T[];
193
194
type BoolObj<T extends Record<string, any>> = boolean | Partial<T>;
195
196
interface ExperimentalOptions {
197
strictScanContentPaths: boolean;
198
tailwindcss4: boolean;
199
}
200
```