https://github.com/eioluseyi/tailwind-fade

https://github.com/eioluseyi/tailwind-fade

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/eioluseyi/tailwind-fade
• Owner: eioluseyi
• License: mit
• Created: 2024-09-08T19:26:25.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-08T22:03:21.000Z (4 months ago)
• Last Synced: 2024-09-08T23:19:36.694Z (4 months ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 0
• 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-`

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

![NPM Version](https://img.shields.io/npm/v/@eioluseyi/tailwind-fade)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](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