0
# Module Configuration
1

2
Core module configuration for integrating Tailwind CSS into Nuxt applications. Controls CSS file handling, configuration loading, and feature enablement.
3

4
## Capabilities
5

6
### Module Options Interface
7

8
Main configuration interface for the Nuxt Tailwind CSS module.
9

10
```typescript { .api }
11
interface ModuleOptions {
12
  /** 
13
   * Path(s) to Tailwind configuration file(s)
14
   * @default []
15
   * @deprecated use config property instead
16
   */
17
  configPath: string | string[];
18
  
19
  /** 
20
   * Path to Tailwind CSS file or disable CSS injection
21
   * @default '~/assets/css/tailwind.css'
22
   */
23
  cssPath: string | false | [string, { injectPosition: InjectPosition }];
24
  
25
  /** 
26
   * Tailwind configuration as inline config, file path, or array
27
   * @default {} 
28
   */
29
  config: Partial<TWConfig> | string | Array<Partial<TWConfig> | string>;
30
  
31
  /** 
32
   * Enable/configure the configuration viewer
33
   * @default true in development
34
   */
35
  viewer: boolean | ViewerConfig;
36
  
37
  /** 
38
   * Enable/configure runtime config access
39
   * @default false
40
   */
41
  exposeConfig: boolean | ExposeConfig;
42
  
43
  /** 
44
   * Suppress logging when everything is working
45
   * @default nuxt.options.logLevel === 'silent'
46
   */
47
  quiet: boolean;
48
  
49
  /** 
50
   * Enable editor support utilities
51
   * @default false
52
   */
53
  editorSupport: boolean | EditorSupportConfig;
54
  
55
  /** 
56
   * Experimental features
57
   * @default undefined
58
   */
59
  experimental?: Partial<ExperimentalOptions>;
60
  
61
  /** 
62
   * Disable Hot Module Reload for configuration
63
   * @default false
64
   */
65
  disableHMR?: boolean;
66
}
67
```
68

69
### CSS Path Configuration
70

71
Control how Tailwind CSS is injected into your application.
72

73
```typescript { .api }
74
type CSSPathConfig = string | false | [string, { injectPosition: InjectPosition }];
75

76
type InjectPosition = 'first' | 'last' | number | { after: string };
77
```
78

79
**Usage Examples:**
80

81
```typescript
82
// nuxt.config.ts
83
export default defineNuxtConfig({
84
  tailwindcss: {
85
    // Use custom CSS file
86
    cssPath: '~/assets/styles/main.css',
87
    
88
    // Disable CSS injection entirely
89
    cssPath: false,
90
    
91
    // Custom CSS with injection position
92
    cssPath: ['~/assets/css/tailwind.css', { injectPosition: 'first' }],
93
    
94
    // Inject after specific CSS file
95
    cssPath: ['~/assets/css/tailwind.css', { 
96
      injectPosition: { after: '~/assets/css/reset.css' } 
97
    }],
98
  }
99
});
100
```
101

102
### Configuration Sources
103

104
Multiple ways to provide Tailwind configuration to the module.
105

106
```typescript { .api }
107
type ConfigSource = Partial<TWConfig> | string | Array<Partial<TWConfig> | string>;
108
```
109

110
**Usage Examples:**
111

112
```typescript
113
// nuxt.config.ts
114
export default defineNuxtConfig({
115
  tailwindcss: {
116
    // Inline configuration
117
    config: {
118
      theme: {
119
        extend: {
120
          colors: { primary: '#3b82f6' }
121
        }
122
      }
123
    },
124
    
125
    // File path
126
    config: 'tailwind.config.js',
127
    
128
    // Multiple sources (merged in order)
129
    config: [
130
      'tailwind.config.base.js',
131
      { 
132
        theme: { 
133
          extend: { 
134
            spacing: { '18': '4.5rem' } 
135
          } 
136
        } 
137
      },
138
      'tailwind.config.overrides.js'
139
    ]
140
  }
141
});
142
```
143

144
### Experimental Options
145

146
Experimental features that may change in future versions.
147

148
```typescript { .api }
149
interface ExperimentalOptions {
150
  /** 
151
   * Use specific files for content paths instead of glob patterns
152
   * @default false
153
   */
154
  strictScanContentPaths: boolean;
155
  
156
  /** 
157
   * Enable Tailwind CSS v4 support (experimental)
158
   * @default false
159
   */
160
  tailwindcss4: boolean;
161
}
162
```
163

164
**Usage Examples:**
165

166
```typescript
167
// nuxt.config.ts
168
export default defineNuxtConfig({
169
  tailwindcss: {
170
    experimental: {
171
      strictScanContentPaths: true,
172
      tailwindcss4: true
173
    }
174
  }
175
});
176
```
177

178
### Module Defaults
179

180
Default values applied when options are not specified.
181

182
```typescript { .api }
183
function defaults(nuxt?: Nuxt): ModuleOptions;
184
```
185

186
The module applies these defaults automatically:
187

188
- `configPath`: `[]` (empty array)
189
- `cssPath`: `'~/assets/css/tailwind.css'`
190
- `config`: `{}` (empty object)
191
- `viewer`: `true` in development, `false` in production
192
- `exposeConfig`: `false`
193
- `quiet`: matches `nuxt.options.logLevel === 'silent'`
194
- `editorSupport`: `false`
195

196
## Module Integration
197

198
The module integrates with Nuxt's lifecycle and build process:
199

200
1. **Setup Phase**: Validates options and installs required dependencies
201
2. **Config Loading**: Loads and merges Tailwind configurations from all sources
202
3. **CSS Integration**: Injects CSS file and configures PostCSS plugins
203
4. **Development Tools**: Sets up viewer and editor support if enabled
204
5. **Template Generation**: Creates runtime templates for config access if enabled