CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuxtjs--tailwindcss

Tailwind CSS module for Nuxt applications with zero configuration, CSS nesting support, and configuration viewer

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

runtime-configuration.mddocs/

Runtime Configuration

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

Capabilities

Expose Configuration

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

interface ExposeConfig {
  /** 
   * Import alias for the configuration
   * @default '#tailwind-config'
   * @deprecated Use nuxt.config alias instead
   */
  alias: string;
  
  /** 
   * Depth level for configuration references to optimize tree-shaking
   * @default 2
   */
  level: number;
  
  /** 
   * Write templates to filesystem for non-VFS access
   * @deprecated Use app:templates hook instead
   */
  write?: boolean;
}

Usage Examples:

// nuxt.config.ts - Enable config exposure
export default defineNuxtConfig({
  tailwindcss: {
    exposeConfig: true // Use default settings
  }
});

// Custom configuration
export default defineNuxtConfig({
  tailwindcss: {
    exposeConfig: {
      alias: '#tw-config',
      level: 3
    }
  }
});

Runtime Configuration Access

Access your Tailwind configuration at runtime within your application.

// Import patterns when exposeConfig is enabled

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

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

// Deep imports - specific properties
import colors from '#tailwind-config/theme/colors';
import spacing from '#tailwind-config/theme/spacing';

Usage Examples:

<!-- Component using runtime configuration -->
<template>
  <div>
    <!-- Dynamic color based on config -->
    <div :style="{ backgroundColor: colors.primary[500] }">
      Primary Color Box
    </div>
    
    <!-- Responsive breakpoint logic -->
    <div v-if="isLargeScreen" class="hidden lg:block">
      Large screen content
    </div>
  </div>
</template>

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

// Access theme colors
const colors = theme.colors;

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

// Access spacing values
const spacing = theme.spacing;
</script>
// Composable using Tailwind config
export function useTailwindBreakpoints() {
  const { screens } = await import('#tailwind-config');
  
  const breakpoints = computed(() => ({
    sm: parseInt(screens.sm),
    md: parseInt(screens.md),
    lg: parseInt(screens.lg),
    xl: parseInt(screens.xl),
    '2xl': parseInt(screens['2xl'])
  }));
  
  return { breakpoints };
}

Template Generation

The module generates runtime templates based on your configuration structure.

/**
 * Creates templates for runtime configuration access
 * @param config - Expose configuration options
 * @param nuxt - Nuxt instance
 * @returns Array of generated template destinations
 */
function createExposeTemplates(
  config: ExposeConfig,
  nuxt?: Nuxt
): string[];

Generated Template Structure:

// Example generated templates structure
artifacts/
  .nuxt/
    tailwind/
      expose/
        index.mjs          // Main export
        theme.mjs          // Theme configuration
        theme/
          colors.mjs       // Color palette
          spacing.mjs      // Spacing scale
          fontSize.mjs     // Font sizes
        screens.mjs        // Breakpoints
        plugins.mjs        // Plugin configurations

Type Definitions

TypeScript support for runtime configuration access.

// Generated type definitions
declare module '#tailwind-config' {
  const config: import('tailwindcss').Config;
  export default config;
  
  export const theme: import('tailwindcss').Config['theme'];
  export const screens: import('tailwindcss').Config['theme']['screens'];
  export const colors: import('tailwindcss').Config['theme']['colors'];
  export const spacing: import('tailwindcss').Config['theme']['spacing'];
  // ... other theme properties
}

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

// Similar declarations for other deep imports

Configuration Optimization

Tree-shaking and performance optimizations for runtime configuration access.

interface OptimizationSettings {
  /** 
   * Maximum depth for generating individual exports
   * Higher values create more granular imports but larger bundle
   */
  level: number;
  
  /** 
   * Properties with non-serializable values are handled specially
   */
  unsafeProperties: string[];
}

Tree-shaking Benefits:

// Only imports the specific colors needed
import { blue, red } from '#tailwind-config/theme/colors';

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

Use Cases

Dynamic Theming

// composables/useTheme.ts
export function useTheme() {
  const switchTheme = async (themeName: string) => {
    const { theme } = await import('#tailwind-config');
    
    // Apply theme colors dynamically
    document.documentElement.style.setProperty(
      '--primary-color', 
      theme.colors[themeName][500]
    );
  };
  
  return { switchTheme };
}

Responsive Logic

// composables/useBreakpoints.ts
export function useBreakpoints() {
  const { screens } = await import('#tailwind-config');
  
  const isMobile = computed(() => 
    window.innerWidth < parseInt(screens.md)
  );
  
  const isTablet = computed(() => 
    window.innerWidth >= parseInt(screens.md) && 
    window.innerWidth < parseInt(screens.lg)
  );
  
  return { isMobile, isTablet };
}

Configuration Validation

// utils/validateConfig.ts
export async function validateTailwindConfig() {
  const config = await import('#tailwind-config');
  
  // Validate required colors exist
  const requiredColors = ['primary', 'secondary', 'accent'];
  const missingColors = requiredColors.filter(
    color => !config.theme.colors[color]
  );
  
  if (missingColors.length > 0) {
    throw new Error(`Missing required colors: ${missingColors.join(', ')}`);
  }
  
  return true;
}

Performance Considerations

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

Install with Tessl CLI

npx tessl i tessl/npm-nuxtjs--tailwindcss

docs

configuration-utilities.md

development-tools.md

index.md

module-configuration.md

module-hooks.md

runtime-configuration.md

tile.json