0
# Runtime Configuration
1

2
Optional runtime access to resolved Tailwind configuration for dynamic styling and configuration introspection.
3

4
## Capabilities
5

6
### Expose Configuration
7

8
Enable runtime access to your Tailwind CSS configuration within your Nuxt application.
9

10
```typescript { .api }
11
interface ExposeConfig {
12
  /** 
13
   * Import alias for the configuration
14
   * @default '#tailwind-config'
15
   * @deprecated Use nuxt.config alias instead
16
   */
17
  alias: string;
18
  
19
  /** 
20
   * Depth level for configuration references to optimize tree-shaking
21
   * @default 2
22
   */
23
  level: number;
24
  
25
  /** 
26
   * Write templates to filesystem for non-VFS access
27
   * @deprecated Use app:templates hook instead
28
   */
29
  write?: boolean;
30
}
31
```
32

33
**Usage Examples:**
34

35
```typescript
36
// nuxt.config.ts - Enable config exposure
37
export default defineNuxtConfig({
38
  tailwindcss: {
39
    exposeConfig: true // Use default settings
40
  }
41
});
42

43
// Custom configuration
44
export default defineNuxtConfig({
45
  tailwindcss: {
46
    exposeConfig: {
47
      alias: '#tw-config',
48
      level: 3
49
    }
50
  }
51
});
52
```
53

54
### Runtime Configuration Access
55

56
Access your Tailwind configuration at runtime within your application.
57

58
```typescript { .api }
59
// Import patterns when exposeConfig is enabled
60

61
// Default import - full configuration
62
import config from '#tailwind-config';
63

64
// Named imports - specific sections
65
import { theme, screens } from '#tailwind-config';
66

67
// Deep imports - specific properties
68
import colors from '#tailwind-config/theme/colors';
69
import spacing from '#tailwind-config/theme/spacing';
70
```
71

72
**Usage Examples:**
73

74
```vue
75
<!-- Component using runtime configuration -->
76
<template>
77
  <div>
78
    <!-- Dynamic color based on config -->
79
    <div :style="{ backgroundColor: colors.primary[500] }">
80
      Primary Color Box
81
    </div>
82
    
83
    <!-- Responsive breakpoint logic -->
84
    <div v-if="isLargeScreen" class="hidden lg:block">
85
      Large screen content
86
    </div>
87
  </div>
88
</template>
89

90
<script setup>
91
import { theme, screens } from '#tailwind-config';
92

93
// Access theme colors
94
const colors = theme.colors;
95

96
// Use breakpoints for logic
97
const isLargeScreen = window.innerWidth >= parseInt(screens.lg);
98

99
// Access spacing values
100
const spacing = theme.spacing;
101
</script>
102
```
103

104
```typescript
105
// Composable using Tailwind config
106
export function useTailwindBreakpoints() {
107
  const { screens } = await import('#tailwind-config');
108
  
109
  const breakpoints = computed(() => ({
110
    sm: parseInt(screens.sm),
111
    md: parseInt(screens.md),
112
    lg: parseInt(screens.lg),
113
    xl: parseInt(screens.xl),
114
    '2xl': parseInt(screens['2xl'])
115
  }));
116
  
117
  return { breakpoints };
118
}
119
```
120

121
### Template Generation
122

123
The module generates runtime templates based on your configuration structure.
124

125
```typescript { .api }
126
/**
127
 * Creates templates for runtime configuration access
128
 * @param config - Expose configuration options
129
 * @param nuxt - Nuxt instance
130
 * @returns Array of generated template destinations
131
 */
132
function createExposeTemplates(
133
  config: ExposeConfig,
134
  nuxt?: Nuxt
135
): string[];
136
```
137

138
**Generated Template Structure:**
139

140
```typescript
141
// Example generated templates structure
142
artifacts/
143
  .nuxt/
144
    tailwind/
145
      expose/
146
        index.mjs          // Main export
147
        theme.mjs          // Theme configuration
148
        theme/
149
          colors.mjs       // Color palette
150
          spacing.mjs      // Spacing scale
151
          fontSize.mjs     // Font sizes
152
        screens.mjs        // Breakpoints
153
        plugins.mjs        // Plugin configurations
154
```
155

156
### Type Definitions
157

158
TypeScript support for runtime configuration access.
159

160
```typescript { .api }
161
// Generated type definitions
162
declare module '#tailwind-config' {
163
  const config: import('tailwindcss').Config;
164
  export default config;
165
  
166
  export const theme: import('tailwindcss').Config['theme'];
167
  export const screens: import('tailwindcss').Config['theme']['screens'];
168
  export const colors: import('tailwindcss').Config['theme']['colors'];
169
  export const spacing: import('tailwindcss').Config['theme']['spacing'];
170
  // ... other theme properties
171
}
172

173
declare module '#tailwind-config/theme/colors' {
174
  const colors: import('tailwindcss').Config['theme']['colors'];
175
  export default colors;
176
}
177

178
// Similar declarations for other deep imports
179
```
180

181
### Configuration Optimization
182

183
Tree-shaking and performance optimizations for runtime configuration access.
184

185
```typescript { .api }
186
interface OptimizationSettings {
187
  /** 
188
   * Maximum depth for generating individual exports
189
   * Higher values create more granular imports but larger bundle
190
   */
191
  level: number;
192
  
193
  /** 
194
   * Properties with non-serializable values are handled specially
195
   */
196
  unsafeProperties: string[];
197
}
198
```
199

200
**Tree-shaking Benefits:**
201

202
```typescript
203
// Only imports the specific colors needed
204
import { blue, red } from '#tailwind-config/theme/colors';
205

206
// Instead of importing entire theme
207
import { theme } from '#tailwind-config'; // Larger bundle
208
const colors = theme.colors; // All colors included
209
```
210

211
## Use Cases
212

213
### Dynamic Theming
214

215
```typescript
216
// composables/useTheme.ts
217
export function useTheme() {
218
  const switchTheme = async (themeName: string) => {
219
    const { theme } = await import('#tailwind-config');
220
    
221
    // Apply theme colors dynamically
222
    document.documentElement.style.setProperty(
223
      '--primary-color', 
224
      theme.colors[themeName][500]
225
    );
226
  };
227
  
228
  return { switchTheme };
229
}
230
```
231

232
### Responsive Logic
233

234
```typescript
235
// composables/useBreakpoints.ts
236
export function useBreakpoints() {
237
  const { screens } = await import('#tailwind-config');
238
  
239
  const isMobile = computed(() => 
240
    window.innerWidth < parseInt(screens.md)
241
  );
242
  
243
  const isTablet = computed(() => 
244
    window.innerWidth >= parseInt(screens.md) && 
245
    window.innerWidth < parseInt(screens.lg)
246
  );
247
  
248
  return { isMobile, isTablet };
249
}
250
```
251

252
### Configuration Validation
253

254
```typescript
255
// utils/validateConfig.ts
256
export async function validateTailwindConfig() {
257
  const config = await import('#tailwind-config');
258
  
259
  // Validate required colors exist
260
  const requiredColors = ['primary', 'secondary', 'accent'];
261
  const missingColors = requiredColors.filter(
262
    color => !config.theme.colors[color]
263
  );
264
  
265
  if (missingColors.length > 0) {
266
    throw new Error(`Missing required colors: ${missingColors.join(', ')}`);
267
  }
268
  
269
  return true;
270
}
271
```
272

273
## Performance Considerations
274

275
1. **Bundle Size**: Runtime config access increases bundle size
276
2. **Tree Shaking**: Use deep imports for better tree-shaking
277
3. **Level Setting**: Higher levels create more files but enable better optimization
278
4. **Lazy Loading**: Use dynamic imports for non-critical configuration access
279
5. **Caching**: Configuration is statically generated and cached at build time