Beautiful Browser Console Output Using Tailwind CSS – twlog

twlog is a JavaScript utility library that transforms browser console output using Tailwind CSS utility classes.

The library converts your familiar Tailwind classes into CSS strings that the browser console can render.

This gives you complete control over console message styling without writing custom CSS or dealing with complex string formatting.

Features:

• Tailwind Class Support: Apply any Tailwind utility class to console text, including colors, typography, spacing, and effects.
• Fluent Chainable API: Build complex console messages by chaining .text() and .line() methods in a readable sequence.
• Multi-Segment Messages: Combine multiple styled text blocks in a single console statement with independent styling for each segment.
• Browser Environment Only: Requires DOM APIs like document and getComputedStyle, so it runs exclusively in browser contexts.

Use Cases

• Security Warnings: Display prominent browser console warnings to prevent self-XSS attacks.
• Developer Easter Eggs: Hide recruitment messages or fun content in your console for curious developers.
• Enhanced Debugging: Add visual hierarchy to debug output by color-coding different log types.
• Product Announcements: Communicate new features, beta programs, or updates directly to developers who have your application open.

How to use it:

Your project must run in a browser environment with access to DOM APIs. Tailwind CSS must be configured and loaded on the page where you’re logging messages. The library reads computed styles from Tailwind classes, so those styles need to exist in the browser context.

1. Install twlog using your preferred package manager:

# Yarn
$ yarn add @rashidlaasri/twlog
# NPM
$ npm install @rashidlaasri/twlog
# PNPM
$ pnpm install @rashidlaasri/twlog

2. Import the twlog function and chain methods to build your styled console message. The .text() method adds a segment with optional Tailwind classes. The .line() method adds newlines before and after the text. Call .log() to output everything to the console.

import { twlog } from '@rashidlaasri/twlog';

twlog()
  .text('Hello', 'text-blue-500 font-bold')
  .text('World', 'text-green-500 italic')
  .log();

3. API methods.

FAQs:

Q: Can I use twlog in a Node.js environment for terminal output?
A: No. twlog requires browser DOM APIs like document.createElement() and getComputedStyle(). The library depends on the browser’s CSS engine to compute Tailwind styles.

Q: What happens if Tailwind CSS is not loaded on the page?
A: The console will display unstyled text. The library creates a DOM element with your specified classes, but if Tailwind styles are not available, getComputedStyle() returns default browser values. Your text will appear without the intended colors, fonts, or spacing. Make sure Tailwind is loaded before calling twlog functions.

Q: Do all Tailwind utility classes work in the console?
A: No. The browser console supports a limited subset of CSS properties. Layout properties like flexbox, grid, position, and display have no effect. The library extracts properties that the console can render: colors, backgrounds, typography, spacing, borders, shadows, and opacity. The console formatter will ignore complex layout classes.

Q: Can I reuse a twlog instance for multiple log statements?
A: Yes. After calling .log(), the internal message array resets automatically. You can chain new .text() or .line() calls on the same instance. Each .log() call outputs independently.