Add gradient color stop position utilities (#10886)
* add gradient color stop positions * update tests to include gradient position color stop reset values * add dedicated color stop position tests * use `%` sign in the name of the uility * update changelog * ensure `length` values and css variables work
This commit is contained in:
parent
0bfee99ed3
commit
51157717da
14 changed files with 359 additions and 95 deletions
|
|
@ -607,16 +607,22 @@
|
|||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
.from-red-300 {
|
||||
--tw-gradient-from: #fca5a5;
|
||||
--tw-gradient-to: #fca5a500;
|
||||
--tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
.via-purple-200 {
|
||||
--tw-gradient-to: #e9d5ff00;
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
|
||||
var(--tw-gradient-to);
|
||||
}
|
||||
.to-blue-400 {
|
||||
--tw-gradient-to: #60a5fa;
|
||||
--tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
|
||||
--tw-gradient-to-position: ;
|
||||
}
|
||||
.decoration-slice {
|
||||
-webkit-box-decoration-break: slice;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue