Skip to main

TailwindCSS Text Glitch Plugin

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

Example

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 Output
fast 1s .text-glitch-fast
normal 3s .text-glitch-normal
slow 5s .text-glitch-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

Text Glitch Example

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


<div class="flex items-center p-6 space-x-4 rounded-lg bg-primary-50 dark:bg-gray-900 border-2 border-primary-500 shadow-lg shadow-primary-500/40">
  <p class="m-0 mr-4 text-5xl font-black text-glitch text-glitch-duration-slow">Text Glitch Example Slow</p>
</div>

Example Slow

Text Glitch Slow Example

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.

Contributors

contrib

License

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

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.

©2024 DesignByCode, Inc. All rights reserved.

Design & Developed by DesignByCode