@designbycode/tailwindcss-text-glitch weekly downloads statistics

Tailwind CSS Text Glitch

The Tailwind CSS plugin generates a glitch effect on text elements.

📇 Table of Contents

• Installation • Using pnpm • Using npm • Using yarn • Usage • Utilities • Applying Text-Glitch Effect • Available duration values for glitch effect • Configuration • Example • Contributing • License • Author • Acknowledgments

Installation

To use this plugin, you need to install it via pnpm, npm or yarn.

Using pnpm

Using npm

Using yarn

Usage

Once the plugin is installed, you can enable it in your Tailwind CSS configuration file. Usually, this file is named tailwind.config.js.

Utilities

The plugin generates several utility classes for applying text glitch effects.

Applying Text-Glitch Effect

To make it work you only need to add the class of to you html. The rest off the classes is just modifiers.

Available duration values for glitch effect

| Key | Value | Full Class |

| fast | 1s | .text-glitch-duration-fast | | normal | 3s | .text-glitch-duration-normal | | slow | 5s | .text-glitch-duration-slow |

Configuration

The plugin allows you to customize the text-glitch by modifying the theme object in your Tailwind CSS configuration file.

Example

Here's an example of how you can use the utility classes to apply text-glitch:

Change duration speed of effect by using duration modifiers.

Contributing

Contributions to this plugin are welcome! If you encounter any issues, have feature requests, or want to improve the plugin, feel free to create a pull request or submit an issue on the GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Claude Myburgh

• Github: @designbycode • Npm: @designbycode_

Acknowledgments

• This plugin is inspired by the needs of web developers using Tailwind CSS. • Special thanks to the Tailwind CSS team for creating such an amazing framework.