Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pyncz/tailwind-mask-image
A `mask-image` plugin for TailwindCSS
https://github.com/pyncz/tailwind-mask-image
css css-utils mask-image plugin tailwind tailwindcss
Last synced: 3 months ago
JSON representation
A `mask-image` plugin for TailwindCSS
- Host: GitHub
- URL: https://github.com/pyncz/tailwind-mask-image
- Owner: pyncz
- License: mit
- Created: 2023-03-19T19:05:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-27T10:26:54.000Z (about 1 year ago)
- Last Synced: 2024-04-14T10:37:09.420Z (10 months ago)
- Topics: css, css-utils, mask-image, plugin, tailwind, tailwindcss
- Language: JavaScript
- Homepage: https://play.tailwindcss.com/szgRchW420
- Size: 1.16 MB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @pyncz/tailwind-mask-image
A `mask-image` plugin for [Tailwind CSS](https://tailwindcss.com).
[
](https://play.tailwindcss.com/szgRchW420)
---
# Install
Install the package with your preferred package-manager.
```
pnpm install @pyncz/tailwind-mask-image
```After that, simply add the plugin into your `tailwind.config.js`:
```js
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@pyncz/tailwind-mask-image')
],
}
```# Usage
## mask-image
There are 3 default values the `mask` utility can accept:
- `linear`
- `radial`
- `none`### `linear`
Applies a `linear-gradient` as the mask image. Opacity is set from 100% at the start to 0% at the end, by default.
```html
```
#### Direction `mask-dir`
By default, the gradient is [directed](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#values) to bottom. You can easily customize the direction with `mask-dir` utility, including arbitrary values.
```html
```
#### Opacity Stops
The `stops` API is similar to tailwind's [Gradient Color Stops](https://tailwindcss.com/docs/gradient-color-stops) core utils, so you can customize your linear mask in a familiar way.
**But!** An important difference is that here you should use not `colors` but `opacity` values.
The `opacity` values are taken from your theme specified in the `tailwind.config.js`, but you obviously can use arbitrary opacity values as well.
```html
```
> **Note**
> You don't have to specify **all** the stops, because the default values (100% for the start and 0% for the end point) still work.##### Stops positions
In addition to setting the opacity of the stops, you can also set the **position** using `mask-point`.
```html
```
This utility don't accept any default value, so use arbitrary values.
### `radial`
Applies a `radial-gradient` as the mask image. Like for the `mask-linear` util, the gradient is spread from 100% opacity at the center to 0% at the ending shape.
```html
```
#### Shape `mask-shape`
[Shape](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient#values) of the gradient, `ellipse` (by default) or `circle`.
```html
```
#### Position `mask-at`
By default, the gradient's position is `center`. You can use the same values as for the [`background-position` css prop](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#syntax) (`top`, `bottom left` etc), as well as arbitrary values with explicit position.
```html
```
#### Reach `mask-reach`
With this util you can specify the size of the gradient.
```html
```
Besides *as-they-are* keyword-values, there are also a couple of aliases:
- `mask-reach-contain` for `closest-side`
- `mask-reach-cover` for `farthest-corner`You can also use arbitrary values:
```html
```
#### Stops
> **Note**
> The opacity stops for `mask-radial` are the same as [the ones described for `mask-linear`](#opacity-stops), including [points API](#stops-positions).```html
```
### `none`
This value matches `mask-image` css prop's default value so it makes no sense to use it *separately*, but it may be pretty useful if you apply the mask responsively.
```html
```
### Arbitrary values
#### Images
The `mask-image` css prop accepts not only gradients but images as well. You can use arbitrary values, for example, to apply `url()` as the mask image.
```html
```
#### Gradients
You can pass other types of the gradients, e.g. `conic-gradient` etc.
```html
```
Also, you may want not to use the API above even for `linear-gradient` or `radial-gradient` so you can pass them arbitrarily too.
```html
```## mask-size
```html
```
## mask-position
```html
```
## mask-repeat
You can manage the [`mask-repeat` css property](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat) as well with the following utilities:
- `mask-repeat`
- `mask-repeat-x`
- `mask-repeat-y`
- `mask-repeat-space`
- `mask-repeat-round`
- `mask-no-repeat````html
```
