or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-utilities.mddevelopment-tools.mdindex.mdmodule-configuration.mdmodule-hooks.mdruntime-configuration.md
tile.json

tessl/npm-nuxtjs--tailwindcss

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@nuxtjs/tailwindcss@6.14.x

To install, run

npx @tessl/cli install tessl/npm-nuxtjs--tailwindcss@6.14.0

index.mddocs/

Nuxt Tailwind CSS

The @nuxtjs/tailwindcss module provides seamless integration of Tailwind CSS into Nuxt applications with zero configuration required. It includes CSS Nesting support via postcss-nesting, a configuration viewer for discovering Tailwind config and colors, the ability to reference Tailwind config directly in applications, and extensibility through Nuxt module hooks. The module supports both Nuxt 2 and Nuxt 3, offers automatic setup with intelligent defaults, and enables developers to quickly prototype and build production-ready applications using Tailwind's utility-first CSS framework within the Nuxt ecosystem.

Package Information

  • Package Name: @nuxtjs/tailwindcss
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @nuxtjs/tailwindcss

Core Imports

// Main module - used in nuxt.config
export default defineNuxtModule<ModuleOptions>;
export type { ModuleOptions, ModuleHooks };

// Configuration utilities  
import { defineConfig } from '@nuxtjs/tailwindcss/config';

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

// Configuration context (internal use)
import '@nuxtjs/tailwindcss/config-ctx';

// Runtime utilities (when editorSupport is enabled)
import { autocompleteUtil as tw } from '#imports';

For CommonJS:

// Main module
const tailwindModule = require('@nuxtjs/tailwindcss');

// Configuration utilities
const { defineConfig } = require('@nuxtjs/tailwindcss/config');

// Configuration merging
const configMerger = require('@nuxtjs/tailwindcss/merger');

Basic Usage

Add the module to your Nuxt configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    // Module options
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config',
    exposeConfig: false,
    viewer: true,
  }
});

Create a Tailwind configuration file:

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

export default defineConfig({
  content: ['./pages/**/*.vue', './components/**/*.vue'],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6'
      }
    }
  }
});

Architecture

The Nuxt Tailwind CSS module is built around several key components:

  • Module Core: Main Nuxt module that integrates Tailwind CSS into the build process
  • Configuration System: Handles config loading, merging, and resolution across Nuxt layers
  • Development Tools: Config viewer and editor support for enhanced development experience
  • Runtime Integration: Optional runtime access to resolved Tailwind configuration
  • PostCSS Integration: Automatic PostCSS plugin setup with CSS nesting support

Capabilities

Module Configuration

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

interface ModuleOptions {
  configPath: string | string[];
  cssPath: string | false | [string, { injectPosition: InjectPosition }];
  config: Partial<TWConfig> | string | Array<Partial<TWConfig> | string>;
  viewer: boolean | ViewerConfig;
  exposeConfig: boolean | ExposeConfig;
  quiet: boolean;
  editorSupport: boolean | EditorSupportConfig;
  experimental?: Partial<ExperimentalOptions>;
  disableHMR?: boolean;
}

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

Module Configuration

Configuration Utilities

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

function defineConfig(config: Partial<TWConfig>): Partial<TWConfig>;

function configMerger(
  base: Partial<TWConfig> | null | undefined,
  ...defaults: Array<Partial<TWConfig> | null | undefined>
): Partial<TWConfig>;

Configuration Utilities

Development Tools

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

interface ViewerConfig {
  endpoint: `/${string}`;
  exportViewer: boolean;
}

interface EditorSupportConfig {
  autocompleteUtil: boolean | { as: string };
  generateConfig: boolean;
}

function autocompleteUtil<T extends TemplateStringsArray | string>(
  tailwindClasses: T
): T;

Development Tools

Runtime Configuration

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

interface ExposeConfig {
  alias: string;
  level: number;
  write?: boolean;
}

Runtime Configuration

Module Hooks

Extensibility hooks for other Nuxt modules to modify Tailwind configuration and behavior during the build process.

interface ModuleHooks {
  'tailwindcss:config': (tailwindConfig: Partial<TWConfig>) => void;
  'tailwindcss:loadConfig': (
    tailwindConfig: Partial<TWConfig> | undefined,
    configPath: string,
    index: number,
    configPaths: string[]
  ) => void;
  'tailwindcss:resolvedConfig': (
    tailwindConfig: ReturnType<typeof import('tailwindcss/resolveConfig')>,
    oldTailwindConfig: TWConfig | undefined
  ) => void;
}

Module Hooks

Types

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

type Arrayable<T> = T | T[];

type BoolObj<T extends Record<string, any>> = boolean | Partial<T>;

interface ExperimentalOptions {
  strictScanContentPaths: boolean;
  tailwindcss4: boolean;
}