✨ Tailwind Neon

Beautiful neon glow utilities for Tailwind CSS v4 — Text Glow, Box Glow, Outline Glow, and Glow Animations.

Fully CSS-based. Zero-JS. Lightweight.

🚀 Installation

npm install tailwind-neon

🔧 Usage (Tailwind v4)

Simply import the stylesheet in your global CSS:

@import "tailwind-neon";

Tailwind will automatically register all utilities through @layer utilities.

✨ What’s Included

| Category | Utilities | | ---------------------- | ----------------------------------------------------------- | | Text Glow | text-glow-xs, text-glow-sm, text-glow, text-glow-lg | | Box Glow | glow-xs, glow-sm, glow, glow-lg | | Outline Glow | glow-outline, glow-outline-lg | | Animations | animate-glow-pulse, animate-glow-flicker | | Custom Glow Colors | Supports CSS variables:--glow-color, --text-glow-color, --outline-glow-color |

🔥 Text Glow

<p class="text-glow text-cyan-400">Default Glow</p>
<p class="text-glow-sm text-pink-400">Small Glow</p>
<p class="text-glow-lg text-purple-400">Large Glow</p>

🔷 Box Glow

<button class="px-4 py-2 rounded bg-cyan-400 text-white glow glow-cyan-400">
  Neon Button
</button>

Variants: glow-xs, glow-sm, glow, glow-lg

🟩 Outline Glow

<button class="px-4 py-2 rounded glow-outline text-cyan-300">
  Outline Glow
</button>

🎨 Custom Glow Colors

Glow colors can be customized in multiple ways. Text Glow defaults to using the element’s text color (currentColor), so you can simply use Tailwind text utilities:

<p class="text-glow text-green-400">Uses Tailwind's text-green-400 as the glow color</p>

For Box Glow and Outline Glow, or when you want independent control, use one of the following options:

Option 1: Inline override

<p class="text-glow" style="--text-glow-color: #39ff14;">
  Custom Green Text Glow
</p>

Option 2: Theme utility (Tailwind v4)

@theme {
  .neon-green {
    --glow-color: #39ff14;
  }
}

Usage:

<button class="px-4 py-2 rounded bg-cyan-400 text-white glow glow-neon-green">
    glow
</button>

✨ Glow Animations

<p class="text-glow animate-glow-pulse text-cyan-300">Pulse</p>
<p class="text-glow animate-glow-flicker text-cyan-400">Flicker</p>

📚 Demo

A full demo is included in this package and can be viewed locally:

demo/index.html

Open this file directly in your browser to preview all glow utilities, animations, and examples.

(Once GitHub Pages is enabled, an online demo will also be available.)

🧩 Features

• Beautiful neon glow utilities (xs/sm/default/lg)
• Text glow, box glow, outline glow
• Pulse & flicker animations
• Tailwind v4 native (@layer utilities)
• Zero-JS, lightweight

📄 License

MIT