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

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

Using npm

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

Using yarn

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.

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.

<div class="text-glitch"></div>

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.

// 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:

<div class="text-glitch">
    Glitch Effect
</div>

Change duration speed of effect by using duration modifiers.

<div class="text-glitch text-glitch-duration-slow">
    Glitch Effect
</div>

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

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.