@designbycode/tailwindcss-text-glitch

Tailwind CSS Text Glitch

!npm
!NPM
!npm bundle size
!ts


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

``bash
pnpm add -D @designbycode/tailwindcss-text-glitch
`

#### Using npm

`bash
npm install --save-dev @designbycode/tailwindcss-text-glitch
`

#### Using yarn

`bash
yarn add -D @designbycode/tailwindcss-text-glitch
`

Usage

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

`javascript
module.exports = {
// ...other configurations
plugins: [
// ...other plugins
require("@designbycode/tailwindcss-text-glitch"),
],
};
`

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 `.text-glitch` to you html. The rest off the classes is just modifiers.

`html

`

#### 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.

`javascript
// tailwind.config.js

module.exports = {
// ...other configurations
plugins: [
// ...other plugins
require("@designbycode/tailwindcss-text-glitch"),
],
theme: {
duration: {
fast: "1s",
normal: "3s",
slow: "5s",
},
},
};

`

Example

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

`html

Glitch Effect

`

Change duration speed of effect by using duration modifiers.

`html

Glitch Effect

``

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.