TailwindCSS Text Glitch Plugin

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

#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

#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="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

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

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