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

Configuration Utilities

Name: tessl/npm-nuxtjs--tailwindcss
Author: tessl

Utilities for creating and managing Tailwind CSS configurations with Nuxt-specific enhancements and context management.

Capabilities

Define Configuration

Creates a Tailwind CSS configuration with Nuxt context awareness and intelligent fallbacks.

/**
 * Creates a Tailwind CSS configuration with Nuxt context awareness
 * @param config - Partial Tailwind configuration object
 * @returns The configuration object or fallback config
 */
function defineConfig(config: Partial<TWConfig>): Partial<TWConfig>;

Usage Examples:

// tailwind.config.ts
import { defineConfig } from '@nuxtjs/tailwindcss/config';

export default defineConfig({
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue'
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ]
});

// tailwind.config.js (CommonJS)
const { defineConfig } = require('@nuxtjs/tailwindcss/config');

module.exports = defineConfig({
  theme: {
    extend: {
      colors: {
        brand: '#ff6b6b'
      }
    }
  }
});

Configuration Context

Internal context management for Tailwind configuration state.

/**
 * Context instance for managing Tailwind configuration state
 */
const ctx: UnctxInstance<boolean>;

The context automatically handles:

Nuxt environment detection
Configuration fallbacks when outside Nuxt context
Integration with module's internal configuration loading

Context Initialization:

// @nuxtjs/tailwindcss/config-ctx - Sets context for configuration loading
import '@nuxtjs/tailwindcss/config-ctx';

This import is used internally by the module to initialize the configuration context. It should typically not be imported directly by end users, but may be needed in certain advanced configuration scenarios.

Configuration Merger

Merges multiple Tailwind CSS configuration objects with special handling for content arrays and objects.

/**
 * Merges Tailwind CSS configuration objects with special content merging logic
 * @param base - Base configuration object
 * @param defaults - Additional configuration objects to merge
 * @returns Merged configuration object
 */
function configMerger(
  base: Partial<TWConfig> | null | undefined,
  ...defaults: Array<Partial<TWConfig> | null | undefined>
): Partial<TWConfig>;

Special Merging Behavior:

The merger has intelligent logic for the content property:

Array + Object: Merges array into object's files property
Object + Array: Merges array into object's files property
Function Handling: Preserves and calls content functions with appropriate arguments

Usage Examples:

import configMerger from '@nuxtjs/tailwindcss/merger';

// Merge configurations
const baseConfig = {
  content: ['./pages/**/*.vue'],
  theme: {
    colors: { primary: 'blue' }
  }
};

const overrides = {
  content: {
    files: ['./components/**/*.vue'],
    extract: {
      vue: (content) => content.match(/class="([^"]*)"/) || []
    }
  },
  theme: {
    colors: { secondary: 'red' }
  }
};

const merged = configMerger(baseConfig, overrides);
// Result: {
//   content: {
//     files: ['./pages/**/*.vue', './components/**/*.vue'],
//     extract: { vue: (content) => ... }
//   },
//   theme: {
//     colors: { primary: 'blue', secondary: 'red' }
//   }
// }

// Function-based content merging
const config1 = {
  content: (files) => [...files, './custom/**/*.vue']
};

const config2 = {
  content: ['./base/**/*.vue']
};

const merged = configMerger(config1, config2);
// The function receives the array and can transform it

Type Definitions

Core types used by the configuration utilities.

type TWConfig = import('tailwindcss').Config;

type Input = Partial<TWConfig> | Record<PropertyKey, any> | null | undefined;

interface UnctxInstance<T> {
  tryUse(): T | undefined;
  use(): T;
  set(instance: T, replace?: boolean): void;
}

Integration with Nuxt

The configuration utilities integrate seamlessly with Nuxt's module system:

Context Detection: defineConfig automatically detects Nuxt environment
Fallback Behavior: Provides appropriate fallbacks when used outside Nuxt
Module Integration: Works with the main module's configuration loading system
Layer Support: Supports Nuxt layers and configuration inheritance

Error Handling

The utilities handle various edge cases:

Missing Tailwind: Graceful fallback when Tailwind CSS is not installed
Invalid Configurations: Validates and sanitizes configuration objects
Context Errors: Handles cases where Nuxt context is unavailable
Merge Conflicts: Resolves configuration conflicts intelligently

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

tessl/npm-nuxtjs--tailwindcss