0
# Development Tools
1

2
Development-time features including configuration viewer, editor support, and Hot Module Reload for enhanced developer experience.
3

4
## Capabilities
5

6
### Configuration Viewer
7

8
Interactive web-based viewer for exploring your Tailwind CSS configuration, including colors, spacing, fonts, and other design tokens.
9

10
```typescript { .api }
11
interface ViewerConfig {
12
  /** 
13
   * The endpoint for the viewer interface
14
   * @default '/_tailwind'
15
   */
16
  endpoint: `/${string}`;
17
  
18
  /** 
19
   * Export the viewer during build for static hosting
20
   * @default false
21
   */
22
  exportViewer: boolean;
23
}
24

25
/**
26
 * Sets up the development configuration viewer
27
 * @param twConfig - Tailwind configuration or config file path
28
 * @param config - Viewer configuration options
29
 * @param nuxt - Nuxt instance
30
 */
31
function setupViewer(
32
  twConfig: string | Partial<TWConfig>,
33
  config: ViewerConfig,
34
  nuxt?: Nuxt
35
): Promise<void>;
36

37
/**
38
 * Exports the viewer for production builds
39
 * @param twConfig - Path to Tailwind configuration file
40
 * @param config - Viewer configuration options  
41
 * @param nuxt - Nuxt instance
42
 */
43
function exportViewer(
44
  twConfig: string,
45
  config: ViewerConfig,
46
  nuxt?: Nuxt
47
): Promise<void>;
48
```
49

50
**Usage Examples:**
51

52
```typescript
53
// nuxt.config.ts - Enable viewer with default settings
54
export default defineNuxtConfig({
55
  tailwindcss: {
56
    viewer: true, // Accessible at /_tailwind in development
57
  }
58
});
59

60
// Custom viewer configuration
61
export default defineNuxtConfig({
62
  tailwindcss: {
63
    viewer: {
64
      endpoint: '/_config',
65
      exportViewer: true // Export viewer on build
66
    }
67
  }
68
});
69

70
// Disable viewer
71
export default defineNuxtConfig({
72
  tailwindcss: {
73
    viewer: false
74
  }
75
});
76
```
77

78
The viewer provides:
79
- **Color Palette**: Visual representation of all configured colors
80
- **Typography**: Font families, sizes, and text styles
81
- **Spacing Scale**: Padding, margin, and spacing values
82
- **Breakpoints**: Responsive design breakpoints
83
- **Plugin Classes**: Classes added by Tailwind plugins
84

85
### Editor Support
86

87
Utilities for enhanced editor experience with Tailwind CSS class autocompletion and IntelliSense.
88

89
```typescript { .api }
90
interface EditorSupportConfig {
91
  /** 
92
   * Enable utility for writing Tailwind classes in template literals
93
   * @default false - if true: { as: 'tw' }
94
   */
95
  autocompleteUtil: boolean | { as: string };
96
  
97
  /** 
98
   * Generate configuration file for editor support
99
   * @default false
100
   */
101
  generateConfig: boolean;
102
}
103

104
/**
105
 * Template literal utility for Tailwind class autocompletion
106
 * @param tailwindClasses - Template literal or string of Tailwind classes
107
 * @returns The input classes unchanged (identity function for IntelliSense)
108
 */
109
function autocompleteUtil<T extends TemplateStringsArray | string>(
110
  tailwindClasses: T
111
): T;
112
```
113

114
**Usage Examples:**
115

116
```typescript
117
// nuxt.config.ts - Enable editor support
118
export default defineNuxtConfig({
119
  tailwindcss: {
120
    editorSupport: true // Provides 'tw' import
121
  }
122
});
123

124
// Custom import name
125
export default defineNuxtConfig({
126
  tailwindcss: {
127
    editorSupport: {
128
      autocompleteUtil: { as: 'twc' }
129
    }
130
  }
131
});
132
```
133

134
```vue
135
<!-- Component usage with autocompletion -->
136
<template>
137
  <div :class="tw`bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded`">
138
    Click me
139
  </div>
140
  
141
  <!-- Or with function call syntax -->
142
  <div :class="tw('flex items-center justify-center min-h-screen')">
143
    Centered content
144
  </div>
145
</template>
146

147
<script setup>
148
// The 'tw' function is auto-imported when editorSupport is enabled
149
// Configure VS Code for full IntelliSense support:
150
// .vscode/settings.json:
151
// {
152
//   "tailwindCSS.experimental.classRegex": [
153
//     "tw`(.*?)`",
154
//     "tw\\('(.*?)'\\)"
155
//   ]
156
// }
157
</script>
158
```
159

160
### Hot Module Reload
161

162
Automatic configuration reloading during development when Tailwind config files change.
163

164
```typescript { .api }
165
interface HMRConfig {
166
  /** 
167
   * Disable Hot Module Reload for configuration changes
168
   * @default false
169
   */
170
  disableHMR?: boolean;
171
}
172
```
173

174
**Usage Examples:**
175

176
```typescript
177
// nuxt.config.ts - Disable HMR (not recommended for development)
178
export default defineNuxtConfig({
179
  tailwindcss: {
180
    disableHMR: true // Requires server restart for config changes
181
  }
182
});
183
```
184

185
HMR automatically handles:
186
- **Config File Changes**: Detects changes to `tailwind.config.*` files
187
- **Template Regeneration**: Updates generated templates with new configuration
188
- **CSS Rebuilding**: Triggers CSS rebuild with new configuration
189
- **Browser Refresh**: Hot reloads styles in the browser without full page refresh
190

191
### Development Server Integration
192

193
Integration with Nuxt's development server and DevTools.
194

195
```typescript { .api }
196
/**
197
 * Integrates with Nuxt DevTools for enhanced development experience
198
 */
199
interface DevToolsIntegration {
200
  /** Custom tab in Nuxt DevTools for Tailwind configuration */
201
  customTabs: Array<{
202
    title: 'Tailwind CSS';
203
    name: 'tailwindcss';
204
    icon: 'logos-tailwindcss-icon';
205
    category: 'modules';
206
    view: { type: 'iframe'; src: string };
207
  }>;
208
}
209
```
210

211
**Features:**
212

213
- **DevTools Integration**: Adds Tailwind CSS tab to Nuxt DevTools
214
- **Live Configuration**: Real-time configuration updates without restart
215
- **Error Handling**: Clear error messages for configuration issues
216
- **Performance Monitoring**: Tracks configuration loading and processing time
217

218
### Development Logging
219

220
Comprehensive logging system for development debugging and information.
221

222
```typescript { .api }
223
/**
224
 * Logger instance for development information
225
 */
226
const logger: {
227
  info(message: string, ...args: any[]): void;
228
  warn(message: string, ...args: any[]): void;
229
  error(message: string, ...args: any[]): void;
230
  success(message: string, ...args: any[]): void;
231
};
232

233
enum LogLevels {
234
  silent = 0,
235
  fatal = 0,
236
  error = 0,
237
  warn = 1,
238
  log = 2,
239
  info = 3,
240
  success = 3,
241
  debug = 4,
242
  trace = 5,
243
  verbose = 5
244
}
245
```
246

247
**Usage Examples:**
248

249
```typescript
250
// nuxt.config.ts - Control logging verbosity
251
export default defineNuxtConfig({
252
  tailwindcss: {
253
    quiet: true // Suppress info logs
254
  }
255
});
256
```
257

258
The logger provides information about:
259
- **Configuration Loading**: Which config files are loaded
260
- **CSS File Resolution**: Path to resolved CSS files
261
- **Viewer Status**: Viewer URL and availability
262
- **Error Details**: Detailed error messages for troubleshooting
263

264
## Development Workflow
265

266
The development tools support a streamlined workflow:
267

268
1. **Configuration**: Set up viewer and editor support in `nuxt.config.ts`
269
2. **Development**: Use HMR for real-time configuration changes
270
3. **Exploration**: Browse configuration via the web viewer
271
4. **Authoring**: Use editor utilities for enhanced class authoring
272
5. **Debugging**: Monitor logs for configuration issues
273
6. **Production**: Optionally export viewer for static hosting