Skip to content

A Tailwind CSS plugin for adding text glow effects with customizable blur sizes and colors.

License

Notifications You must be signed in to change notification settings

jaameypr/tailwindcss-textglow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

    const textGlow = require('tailwindcss-textglow');
    
    module.exports = {
      plugins: [textGlow],
    };
  2. 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


Enjoy crafting glowing text with Tailwind CSS TextGlow Plugin! ✨

About

A Tailwind CSS plugin for adding text glow effects with customizable blur sizes and colors.

Resources

License

Stars

Watchers

Forks

Packages

No packages published