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

module-configuration.mddocs/

Module Configuration

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

Capabilities

Module Options Interface

Main configuration interface for the Nuxt Tailwind CSS module.

interface ModuleOptions {
  /** 
   * Path(s) to Tailwind configuration file(s)
   * @default []
   * @deprecated use config property instead
   */
  configPath: string | string[];
  
  /** 
   * Path to Tailwind CSS file or disable CSS injection
   * @default '~/assets/css/tailwind.css'
   */
  cssPath: string | false | [string, { injectPosition: InjectPosition }];
  
  /** 
   * Tailwind configuration as inline config, file path, or array
   * @default {} 
   */
  config: Partial<TWConfig> | string | Array<Partial<TWConfig> | string>;
  
  /** 
   * Enable/configure the configuration viewer
   * @default true in development
   */
  viewer: boolean | ViewerConfig;
  
  /** 
   * Enable/configure runtime config access
   * @default false
   */
  exposeConfig: boolean | ExposeConfig;
  
  /** 
   * Suppress logging when everything is working
   * @default nuxt.options.logLevel === 'silent'
   */
  quiet: boolean;
  
  /** 
   * Enable editor support utilities
   * @default false
   */
  editorSupport: boolean | EditorSupportConfig;
  
  /** 
   * Experimental features
   * @default undefined
   */
  experimental?: Partial<ExperimentalOptions>;
  
  /** 
   * Disable Hot Module Reload for configuration
   * @default false
   */
  disableHMR?: boolean;
}

CSS Path Configuration

Control how Tailwind CSS is injected into your application.

type CSSPathConfig = string | false | [string, { injectPosition: InjectPosition }];

type InjectPosition = 'first' | 'last' | number | { after: string };

Usage Examples:

// nuxt.config.ts
export default defineNuxtConfig({
  tailwindcss: {
    // Use custom CSS file
    cssPath: '~/assets/styles/main.css',
    
    // Disable CSS injection entirely
    cssPath: false,
    
    // Custom CSS with injection position
    cssPath: ['~/assets/css/tailwind.css', { injectPosition: 'first' }],
    
    // Inject after specific CSS file
    cssPath: ['~/assets/css/tailwind.css', { 
      injectPosition: { after: '~/assets/css/reset.css' } 
    }],
  }
});

Configuration Sources

Multiple ways to provide Tailwind configuration to the module.

type ConfigSource = Partial<TWConfig> | string | Array<Partial<TWConfig> | string>;

Usage Examples:

// nuxt.config.ts
export default defineNuxtConfig({
  tailwindcss: {
    // Inline configuration
    config: {
      theme: {
        extend: {
          colors: { primary: '#3b82f6' }
        }
      }
    },
    
    // File path
    config: 'tailwind.config.js',
    
    // Multiple sources (merged in order)
    config: [
      'tailwind.config.base.js',
      { 
        theme: { 
          extend: { 
            spacing: { '18': '4.5rem' } 
          } 
        } 
      },
      'tailwind.config.overrides.js'
    ]
  }
});

Experimental Options

Experimental features that may change in future versions.

interface ExperimentalOptions {
  /** 
   * Use specific files for content paths instead of glob patterns
   * @default false
   */
  strictScanContentPaths: boolean;
  
  /** 
   * Enable Tailwind CSS v4 support (experimental)
   * @default false
   */
  tailwindcss4: boolean;
}

Usage Examples:

// nuxt.config.ts
export default defineNuxtConfig({
  tailwindcss: {
    experimental: {
      strictScanContentPaths: true,
      tailwindcss4: true
    }
  }
});

Module Defaults

Default values applied when options are not specified.

function defaults(nuxt?: Nuxt): ModuleOptions;

The module applies these defaults automatically:

  • configPath: [] (empty array)
  • cssPath: '~/assets/css/tailwind.css'
  • config: {} (empty object)
  • viewer: true in development, false in production
  • exposeConfig: false
  • quiet: matches nuxt.options.logLevel === 'silent'
  • editorSupport: false

Module Integration

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

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

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