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
development-tools.mddocs/
Development Tools
Development-time features including configuration viewer, editor support, and Hot Module Reload for enhanced developer experience.
Capabilities
Configuration Viewer
Interactive web-based viewer for exploring your Tailwind CSS configuration, including colors, spacing, fonts, and other design tokens.
interface ViewerConfig {
/**
* The endpoint for the viewer interface
* @default '/_tailwind'
*/
endpoint: `/${string}`;
/**
* Export the viewer during build for static hosting
* @default false
*/
exportViewer: boolean;
}
/**
* Sets up the development configuration viewer
* @param twConfig - Tailwind configuration or config file path
* @param config - Viewer configuration options
* @param nuxt - Nuxt instance
*/
function setupViewer(
twConfig: string | Partial<TWConfig>,
config: ViewerConfig,
nuxt?: Nuxt
): Promise<void>;
/**
* Exports the viewer for production builds
* @param twConfig - Path to Tailwind configuration file
* @param config - Viewer configuration options
* @param nuxt - Nuxt instance
*/
function exportViewer(
twConfig: string,
config: ViewerConfig,
nuxt?: Nuxt
): Promise<void>;Usage Examples:
// nuxt.config.ts - Enable viewer with default settings
export default defineNuxtConfig({
tailwindcss: {
viewer: true, // Accessible at /_tailwind in development
}
});
// Custom viewer configuration
export default defineNuxtConfig({
tailwindcss: {
viewer: {
endpoint: '/_config',
exportViewer: true // Export viewer on build
}
}
});
// Disable viewer
export default defineNuxtConfig({
tailwindcss: {
viewer: false
}
});The viewer provides:
- Color Palette: Visual representation of all configured colors
- Typography: Font families, sizes, and text styles
- Spacing Scale: Padding, margin, and spacing values
- Breakpoints: Responsive design breakpoints
- Plugin Classes: Classes added by Tailwind plugins
Editor Support
Utilities for enhanced editor experience with Tailwind CSS class autocompletion and IntelliSense.
interface EditorSupportConfig {
/**
* Enable utility for writing Tailwind classes in template literals
* @default false - if true: { as: 'tw' }
*/
autocompleteUtil: boolean | { as: string };
/**
* Generate configuration file for editor support
* @default false
*/
generateConfig: boolean;
}
/**
* Template literal utility for Tailwind class autocompletion
* @param tailwindClasses - Template literal or string of Tailwind classes
* @returns The input classes unchanged (identity function for IntelliSense)
*/
function autocompleteUtil<T extends TemplateStringsArray | string>(
tailwindClasses: T
): T;Usage Examples:
// nuxt.config.ts - Enable editor support
export default defineNuxtConfig({
tailwindcss: {
editorSupport: true // Provides 'tw' import
}
});
// Custom import name
export default defineNuxtConfig({
tailwindcss: {
editorSupport: {
autocompleteUtil: { as: 'twc' }
}
}
});<!-- Component usage with autocompletion -->
<template>
<div :class="tw`bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded`">
Click me
</div>
<!-- Or with function call syntax -->
<div :class="tw('flex items-center justify-center min-h-screen')">
Centered content
</div>
</template>
<script setup>
// The 'tw' function is auto-imported when editorSupport is enabled
// Configure VS Code for full IntelliSense support:
// .vscode/settings.json:
// {
// "tailwindCSS.experimental.classRegex": [
// "tw`(.*?)`",
// "tw\\('(.*?)'\\)"
// ]
// }
</script>Hot Module Reload
Automatic configuration reloading during development when Tailwind config files change.
interface HMRConfig {
/**
* Disable Hot Module Reload for configuration changes
* @default false
*/
disableHMR?: boolean;
}Usage Examples:
// nuxt.config.ts - Disable HMR (not recommended for development)
export default defineNuxtConfig({
tailwindcss: {
disableHMR: true // Requires server restart for config changes
}
});HMR automatically handles:
- Config File Changes: Detects changes to
tailwind.config.*files - Template Regeneration: Updates generated templates with new configuration
- CSS Rebuilding: Triggers CSS rebuild with new configuration
- Browser Refresh: Hot reloads styles in the browser without full page refresh
Development Server Integration
Integration with Nuxt's development server and DevTools.
/**
* Integrates with Nuxt DevTools for enhanced development experience
*/
interface DevToolsIntegration {
/** Custom tab in Nuxt DevTools for Tailwind configuration */
customTabs: Array<{
title: 'Tailwind CSS';
name: 'tailwindcss';
icon: 'logos-tailwindcss-icon';
category: 'modules';
view: { type: 'iframe'; src: string };
}>;
}Features:
- DevTools Integration: Adds Tailwind CSS tab to Nuxt DevTools
- Live Configuration: Real-time configuration updates without restart
- Error Handling: Clear error messages for configuration issues
- Performance Monitoring: Tracks configuration loading and processing time
Development Logging
Comprehensive logging system for development debugging and information.
/**
* Logger instance for development information
*/
const logger: {
info(message: string, ...args: any[]): void;
warn(message: string, ...args: any[]): void;
error(message: string, ...args: any[]): void;
success(message: string, ...args: any[]): void;
};
enum LogLevels {
silent = 0,
fatal = 0,
error = 0,
warn = 1,
log = 2,
info = 3,
success = 3,
debug = 4,
trace = 5,
verbose = 5
}Usage Examples:
// nuxt.config.ts - Control logging verbosity
export default defineNuxtConfig({
tailwindcss: {
quiet: true // Suppress info logs
}
});The logger provides information about:
- Configuration Loading: Which config files are loaded
- CSS File Resolution: Path to resolved CSS files
- Viewer Status: Viewer URL and availability
- Error Details: Detailed error messages for troubleshooting
Development Workflow
The development tools support a streamlined workflow:
- Configuration: Set up viewer and editor support in
nuxt.config.ts - Development: Use HMR for real-time configuration changes
- Exploration: Browse configuration via the web viewer
- Authoring: Use editor utilities for enhanced class authoring
- Debugging: Monitor logs for configuration issues
- Production: Optionally export viewer for static hosting
Install with Tessl CLI
npx tessl i tessl/npm-nuxtjs--tailwindcss