twlog

Beautiful browser console.log with Tailwind CSS.

Report Bug · Request Feature

Overview

twlog is a small package that allows you to create beautifully styled console.log messages using Tailwind CSS classes. Transform your browser console output with custom styling, colors, and formatting - all using familiar Tailwind utility classes.

Features

• 🎨 Tailwind CSS Integration - Use any Tailwind CSS utility classes to style your console output
• 🔗 Fluent API - Chainable methods for intuitive usage
• 📝 Multiple Text Segments - Combine multiple styled text segments in a single log
• 🎯 TypeScript Support - Full TypeScript definitions included
• 🚀 Zero Dependencies - Lightweight and fast
• 🧪 Well Tested - Comprehensive test coverage

Setup

Installation

Install the package using npm:

npm install @rashidlaasri/twlog

Or using yarn:

yarn add @rashidlaasri/twlog

Or using pnpm:

pnpm add @rashidlaasri/twlog

Requirements

• Browser Environment: This package requires a browser environment with DOM APIs (document, getComputedStyle)
• Tailwind CSS: Your project should have Tailwind CSS configured and loaded in the browser

Usage

The twlog() function lets you style your browser console logs using real Tailwind CSS classes — so you can make debugging, announcements, or Easter eggs look beautiful and on-brand.

Each message is built with a fluent, chainable API. Now here are some fun and useful examples 👇

Hidden gem

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

twlog()
  .line('👀 You found a hidden message!', 'text-pink-400 text-lg font-semibold')
  .text('We like curious people like you 💻', 'text-slate-300 italic')
  .line('We\'re hiring — join us!', 'text-green-400 font-bold')
  .text('👉 careers.example.com', 'bg-green-500/10 text-green-400 px-2 py-1 rounded-md underline')
  .log();

Security alert

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

twlog()
  .line('⚠️ STOP!', 'text-5xl font-extrabold text-red-500')
  .line('This browser feature is intended for developers.', 'text-yellow-400 text-lg font-semibold mt-2')
  .text(
    'If someone told you to copy and paste something here to enable a feature or hack an account, it’s a scam and will give them access to your account.',
    'text-slate-500 mt-2 leading-snug'
  )
  .line('Stay safe 💙', 'text-blue-400 font-bold mt-2')
  .log();

Inspiring quote

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

twlog()
  .line('“Simplicity is the soul of efficiency.”', 'text-purple-300 italic')
  .text('- Austin Freeman', 'text-slate-500 text-sm ml-2')
  .log();

Console debugging

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

twlog()
  .text('[DEBUG]', 'text-xs font-mono text-slate-400')
  .text('Fetching user data…', 'text-blue-400')
  .log();

Tips & Hints

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

twlog()
  .text('💡 Tip:', 'bg-amber-400/10 text-amber-400 inset-ring inset-ring-amber-400/20 font-medium px-2 py-1 rounded-md')
  .text('Use `twlog()` for stylish debugging ✨', 'text-slate-300 ml-2')
  .log();

Dev tools onboarding

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

twlog()
  .line('👋 Welcome to the dev console!', 'text-emerald-400 font-semibold text-lg')
  .text('This project uses Tailwind, Vue, and Vite.', 'text-slate-300 italic')
  .text('Find our docs at → dev.example.com/docs', 'text-blue-400 underline')
  .log();

Marketing / Annoucement drops

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

twlog()
  .text('🔥 New Feature Released:', 'text-pink-400 font-bold')
  .text('Dark Mode is now live! 🌙', 'text-white bg-slate-800 px-2 py-1 rounded')
  .text('Try it now → example.com/settings', 'text-sky-400 underline ml-2')
  .log();

API Reference

twlog()

Creates a new TwLogger instance.

Returns: TwLogger

.text(text: string, classes?: string)

Adds a text segment with optional Tailwind CSS classes.

Parameters:

• text (string): The text to display
• classes (string, optional): Tailwind CSS utility classes

Returns: TwLogger (for chaining)

.line(text: string, classes?: string)

Adds a text segment with newlines before and after.

Parameters:

• text (string): The text to display
• classes (string, optional): Tailwind CSS utility classes

Returns: TwLogger (for chaining)

.log()

Outputs all accumulated text segments to the console with their respective styles.

Returns: void

Development

Building the Project

npm run build

Running Tests

npm test

Linting

npm run lint

Formatting

npm run format

Reporting Issues

If you find a bug or have a feature request:

Check if the issue already exists in the Issues section, if not, please create one.

📝 License

Copyright © 2025 @rashidlaasri.

This project is MIT licensed.

Show your support

Give a ⭐️ if this project helps you and follow me on X 🙌🏾

---

Made with ❤️ for beautiful console logs