tailwindcss-textglow

Tailwind CSS v3.0+ TextGlow Plugin

Tailwind CSS TextGlow is a simple yet powerful plugin that lets you add text glow effects to your Tailwind CSS v3.0+ projects. Customize blur sizes and glow colors to create vibrant and eye-catching designs.

🚀 Features

• Add glow effects to text elements effortlessly.
• Customize blur sizes (glow-sm, glow-lg, etc.).
• Use any Tailwind CSS color for the glow effect (glow-blue-500, glow-red-300, etc.).

🌟 Inspiration

This project is inspired by ycs77/tailwindcss-glowing. Special thanks to its creator for the idea of adding glowing effects to Tailwind CSS.

📦 Installation

Install the plugin using npm or yarn:

npm i -D tailwindcss-textglow
# or yarn
yarn add -D tailwindcss-textglow

🔧 Usage

• Add the plugin to your tailwind.config.js:

  const textGlow = require('tailwindcss-textglow');
  
  module.exports = {
    plugins: [textGlow],
  };
  

• Use the utilities in your HTML or components:

  <h1 class="glow-lg glow-blue-500">
    Glowing Text Example
  </h1>
  

✨ Options

Glow Sizes

Use the following utilities for controlling blur size:

Class	Blur Size
glow-sm	2px
glow	4px (Default)
glow-md	6px
glow-lg	10px
glow-xl	15px
glow-2xl	25px
glow-3xl	35px

Glow Colors

Apply any Tailwind color as the glow color:

• glow-red-500
• glow-blue-400
• glow-green-300
• Or any custom color from your Tailwind theme.

🌟 Example

<div class="text-4xl font-bold glow-xl glow-purple-600">
  Glowing Text Example
</div>

📄 License

This project is licensed under the MIT License.

🌍 Connect

• GitHub: My Profile
• Discord: @jaamey.pr

Enjoy crafting glowing text with Tailwind CSS TextGlow Plugin! ✨