https://github.com/eioluseyi/tailwind-fade
https://github.com/eioluseyi/tailwind-fade
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/eioluseyi/tailwind-fade
- Owner: eioluseyi
- License: mit
- Created: 2024-09-08T19:26:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-24T14:39:55.000Z (over 1 year ago)
- Last Synced: 2025-03-21T02:51:18.109Z (about 1 year ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS Fade Plugin
An open sourced plugin for Tailwind CSS that adds utilities for creating fading effects on elements without using an overlay.
## Installation
```bash
npm install @eioluseyi/tailwind-fade
```
```bash
yarn install @eioluseyi/tailwind-fade
```
## Usage
Add the plugin to your `tailwind.config.js` file:
```javascript
module.exports = {
// ...
plugins: [
require("@eioluseyi/tailwind-fade"),
// ...
],
};
```
Then use the utilities in your HTML:
```html
This text fades on both sides
```
This will create a div with a blue background that fades on both sides. The `fade-x-4` class applies a horizontal fade with a strength of 4 (which is typically `16px`/`1rem`).
#### Fade Directions
The following directions are available:
- `fade-x-`
- `fade-y-`
- `fade-t-`
- `fade-b-`
- `fade-l-`
- `fade-r-`
## Want to know the story behind this plugin?
Read my journey of creating the `tailwind-fade` plugin [here ↗](https://dev.to/eioluseyi/creating-a-tailwind-css-fade-plugin-my-journey-20ij).
## Contributing
Contributions are highly welcome! Please see the [Contributing Guide](https://github.com/eioluseyi/tailwind-fade#contributing) for more details on how you can contribute to this project.
[](https://opensource.org/licenses/MIT)
[](https://github.com/eioluseyi/tailwind-fade/issues)
## Keywords
tailwindcss, tailwind, css, plugin, fade, fading, mask, mask-image, gradient, linear-gradient, utility, utilities, classes, styling, ui, ux, web-development, frontend, customization, effect, visual-effect, opacity, transparency, vignette, edge-fading, content-fading, text-fade, image-fade, background-fade, element-fade, fade-in, fade-out, horizontal-fade, vertical-fade, directional-fade, custom-fade, dynamic-fade, adaptive-fade, responsive-fade, css-mask, webkit-mask, mask-property, css-effects, visual-design, web-design, css-utility, tailwind-extension, tailwind-addon, utility-first, atomic-css, composable, modular, flexible, customizable, configurable, npm-package