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