Glowline

A React component for text highlighting with a beautiful glow effect.

Requirements

This package requires Tailwind CSS to be installed and configured in your project.

Prerequisites

1. Tailwind CSS (version 3.0.0 or higher)
2. React (version 16.8.0 or higher)

Installation

npm install glowline

⚠️ Important: Make sure you have Tailwind CSS installed and configured in your project before using this component.

If you haven't installed Tailwind CSS yet, follow the official Tailwind CSS installation guide.

Usage

import { Highlight } from 'glowline';

function App() {
  return (
    <div>
      <p>
        This is a <Highlight>highlighted text</Highlight> with glow effect.
      </p>
      <p>
        You can also add <Highlight className="bg-blue-400">custom styles</Highlight>.
      </p>
    </div>
  );
}

Tailwind CSS Classes Used

This component uses the following Tailwind CSS classes:

• relative
• inline-block
• absolute
• -inset-x-1
• bottom-0
• h-[0.4em]
• bg-lime-400
• z-0, z-10
• rounded-[4px]

Make sure these utilities are available in your Tailwind CSS build.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | - | The content to be highlighted | | className | string | - | Additional CSS classes to apply |

License

ISC