](https://play.tailwindcss.com/LF91xWKHl7)
+[](https://play.tailwindcss.com/szgRchW420)
---
-## Install
+# Install
Install the package with your preferred package-manager.
```
@@ -27,7 +27,9 @@ module.exports = {
```
-## Usage
+# Usage
+
+## mask-image
There are 3 default values the `mask` utility can accept:
- `linear`
@@ -111,31 +113,31 @@ By default, the gradient's position is `center`. You can use the same values as
```html
```
-
+
-#### Size `mask-size`
+#### 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-size-contain` for `closest-side`
-- `mask-size-cover` for `farthest-corner`
+- `mask-reach-contain` for `closest-side`
+- `mask-reach-cover` for `farthest-corner`
You can also use arbitrary values:
```html
-
-
+
+
```
-
+
#### Stops
@@ -171,13 +173,6 @@ The `mask-image` css prop accepts not only gradients but images as well. You can
```
-In this case you can manage the [`mask-repeat` css property](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat) as well with the `mask-repeat` and `mask-no-repeat` utils.
-
-```html
-
-```
-
-
#### Gradients
You can pass other types of the gradients, e.g. `conic-gradient` etc.
@@ -192,3 +187,40 @@ Also, you may want not to use the API above even for `linear-gradient` or `radia
```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
+
+
+```
+
diff --git a/examples/mask-at.png b/examples/mask-at.png
new file mode 100644
index 0000000..498c926
Binary files /dev/null and b/examples/mask-at.png differ
diff --git a/examples/mask-position.png b/examples/mask-position.png
index 498c926..96fccd7 100644
Binary files a/examples/mask-position.png and b/examples/mask-position.png differ
diff --git a/examples/mask-size-arbitrary.png b/examples/mask-reach-arbitrary.png
similarity index 100%
rename from examples/mask-size-arbitrary.png
rename to examples/mask-reach-arbitrary.png
diff --git a/examples/mask-reach.png b/examples/mask-reach.png
new file mode 100644
index 0000000..ff11e0d
Binary files /dev/null and b/examples/mask-reach.png differ
diff --git a/examples/mask-size.png b/examples/mask-size.png
index ff11e0d..f69af2d 100644
Binary files a/examples/mask-size.png and b/examples/mask-size.png differ
diff --git a/index.js b/index.js
index f4d672f..29c6434 100644
--- a/index.js
+++ b/index.js
@@ -5,19 +5,16 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
{
mask: (value) => ({
maskImage: value,
- maskRepeat: 'var(--tw-mask-repeat)',
/**
* Default vars
*/
- '--tw-mask-repeat': 'repeat',
-
// linear-gradient props
'--tw-mask-direction': 'to bottom',
// radial-gradient props
'--tw-mask-shape': '',
- '--tw-mask-size': 'closest-side',
+ '--tw-mask-reach': 'closest-side',
'--tw-mask-at': 'center',
// stops
@@ -35,20 +32,11 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
none: 'none',
linear: 'linear-gradient(var(--tw-mask-direction), var(--tw-mask-stops))',
radial:
- 'radial-gradient(var(--tw-mask-shape) var(--tw-mask-size) at var(--tw-mask-at), var(--tw-mask-stops))',
+ 'radial-gradient(var(--tw-mask-shape) var(--tw-mask-reach) at var(--tw-mask-at), var(--tw-mask-stops))',
},
}
)
- addUtilities({
- '.mask-repeat': {
- maskRepeat: 'repeat',
- },
- '.mask-no-repeat': {
- maskRepeat: 'no-repeat',
- },
- })
-
// - direction
// NOTE: Can accept angle as an arbitrary value, e.g. `mask-dir-[30deg]`
matchUtilities(
@@ -82,11 +70,11 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
})
// - size
- // NOTE: Can accept X Y size as an arbitrary value, e.g. `mask-size-[25%_25%]`
+ // NOTE: Can accept X Y size as an arbitrary value, e.g. `mask-reach-[25%_25%]`
matchUtilities(
{
- 'mask-size': (value) => ({
- '--tw-mask-size': value,
+ 'mask-reach': (value) => ({
+ '--tw-mask-reach': value,
}),
},
{
@@ -156,4 +144,49 @@ module.exports = plugin(({ theme, addUtilities, matchUtilities }) => {
'--tw-mask-point-via': value,
}),
})
+
+ // Additional attributes
+ // repeat
+ addUtilities({
+ '.mask-repeat': {
+ maskRepeat: 'repeat',
+ },
+ '.mask-repeat-x': {
+ maskRepeat: 'repeat-x',
+ },
+ '.mask-repeat-y': {
+ maskRepeat: 'repeat-y',
+ },
+ '.mask-repeat-space': {
+ maskRepeat: 'space',
+ },
+ '.mask-repeat-round': {
+ maskRepeat: 'round',
+ },
+ '.mask-no-repeat': {
+ maskRepeat: 'no-repeat',
+ },
+ })
+ // size
+ matchUtilities(
+ {
+ 'mask-size': (value) => ({
+ maskSize: value,
+ }),
+ },
+ {
+ values: theme('backgroundSize')
+ },
+ )
+ // position
+ matchUtilities(
+ {
+ 'mask-position': (value) => ({
+ maskPosition: value,
+ }),
+ },
+ {
+ values: theme('backgroundPosition')
+ },
+ )
})
diff --git a/playground/README.md b/playground/README.md
index 767ac55..a6da3ee 100644
--- a/playground/README.md
+++ b/playground/README.md
@@ -3,4 +3,4 @@ You can past them in the [Tailwind Play](https://play.tailwindcss.com) and have
> The shared playground is here:
>
-> [](https://play.tailwindcss.com/LF91xWKHl7)
+> [](https://play.tailwindcss.com/szgRchW420)
diff --git a/playground/index.html b/playground/index.html
index f20bfef..acb7106 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -1,5 +1,7 @@