-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add background-origin
utilities
#4117
Conversation
Codecov Report
@@ Coverage Diff @@
## master #4117 +/- ##
==========================================
+ Coverage 86.82% 86.84% +0.02%
==========================================
Files 339 341 +2
Lines 4826 4835 +9
Branches 919 919
==========================================
+ Hits 4190 4199 +9
Misses 561 561
Partials 75 75
Continue to review full report at Codecov.
|
Well done Mr. Luhr, well done. |
* Add background-origin utilities * Update fixtures * Update basic usage test * Change sort order for background origin * Move background origin after other background properties
* Add background-origin utilities * Update fixtures * Update basic usage test * Change sort order for background origin * Move background origin after other background properties
* Add background-origin utilities * Update fixtures * Update basic usage test * Change sort order for background origin * Move background origin after other background properties
This PR adds support for the
background-origin
property.An example use case is a button with a gradient background and transparent border. This typically results in unexpected border colors appearing, but can be fixed with
background-origin: border-box;
in CSS (orbg-origin-border
in Tailwind CSS with this PR).Here's the API:
bg-origin-border
background-origin: border-box
bg-origin-padding
background-origin: padding-box
bg-origin-content
background-origin: content-box
Only
responsive
variants are enabled by default, but can be configured under thebackgroundOrigin
key in yourtailwind.config.js
file.