Skip to content
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

Merged
merged 5 commits into from
Apr 20, 2021
Merged

Conversation

davidluhr
Copy link

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 (or bg-origin-border in Tailwind CSS with this PR).

Here's the API:

Class CSS
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 the backgroundOrigin key in your tailwind.config.js file.

@tailwindlabs tailwindlabs deleted a comment from bagsa Apr 19, 2021
@tailwindlabs tailwindlabs deleted a comment from bagsa Apr 19, 2021
@tailwindlabs tailwindlabs deleted a comment from bagsa Apr 19, 2021
@codecov-commenter
Copy link

codecov-commenter commented Apr 20, 2021

Codecov Report

Merging #4117 (8a39fae) into master (6ed835c) will increase coverage by 0.02%.
The diff coverage is 100.00%.

❗ Current head 8a39fae differs from pull request most recent head 3c39ff8. Consider uploading reports for the commit 3c39ff8 to get more accurate results
Impacted file tree graph

@@            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              
Impacted Files Coverage Δ
jit/corePlugins/index.js 90.32% <ø> (ø)
src/corePluginList.js 100.00% <ø> (ø)
stubs/defaultConfig.stub.js 100.00% <ø> (ø)
jit/corePlugins/backgroundOrigin.js 100.00% <100.00%> (ø)
src/plugins/backgroundOrigin.js 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e5c41bb...3c39ff8. Read the comment docs.

@adamwathan
Copy link
Member

Well done Mr. Luhr, well done.

@adamwathan adamwathan merged commit e42126e into master Apr 20, 2021
@adamwathan adamwathan deleted the add-background-origin-utilities branch April 20, 2021 16:43
adamwathan pushed a commit that referenced this pull request Apr 23, 2021
* Add background-origin utilities

* Update fixtures

* Update basic usage test

* Change sort order for background origin

* Move background origin after other background properties
adamwathan pushed a commit that referenced this pull request Apr 23, 2021
* Add background-origin utilities

* Update fixtures

* Update basic usage test

* Change sort order for background origin

* Move background origin after other background properties
adamwathan pushed a commit that referenced this pull request May 7, 2021
* Add background-origin utilities

* Update fixtures

* Update basic usage test

* Change sort order for background origin

* Move background origin after other background properties
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants