Skip to content
This repository was archived by the owner on Sep 25, 2020. It is now read-only.

Commit 2cf2ee6

Browse files
adamwathanadamwathan
committed
Add object-fit plugin
1 parent 025db3e commit 2cf2ee6

File tree

4 files changed

+153
-0
lines changed

4 files changed

+153
-0
lines changed

‎dist/styles.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4803,6 +4803,30 @@ button,
48034803
z-index: auto;
48044804
}
48054805

4806+
.object-contain {
4807+
object-fit: contain;
4808+
}
4809+
4810+
.object-cover {
4811+
object-fit: cover;
4812+
}
4813+
4814+
.object-fill {
4815+
object-fit: fill;
4816+
}
4817+
4818+
.object-none {
4819+
object-fit: none;
4820+
}
4821+
4822+
.object-scale {
4823+
object-fit: scale-down;
4824+
}
4825+
4826+
.grid {
4827+
display: grid;
4828+
}
4829+
48064830
@media (min-width: 576px) {
48074831
.sm\:list-reset {
48084832
list-style: none;
@@ -8694,6 +8718,26 @@ button,
86948718
.sm\:z-auto {
86958719
z-index: auto;
86968720
}
8721+
8722+
.sm\:object-contain {
8723+
object-fit: contain;
8724+
}
8725+
8726+
.sm\:object-cover {
8727+
object-fit: cover;
8728+
}
8729+
8730+
.sm\:object-fill {
8731+
object-fit: fill;
8732+
}
8733+
8734+
.sm\:object-none {
8735+
object-fit: none;
8736+
}
8737+
8738+
.sm\:object-scale {
8739+
object-fit: scale-down;
8740+
}
86978741
}
86988742

86998743
@media (min-width: 768px) {
@@ -12587,6 +12631,26 @@ button,
1258712631
.md\:z-auto {
1258812632
z-index: auto;
1258912633
}
12634+
12635+
.md\:object-contain {
12636+
object-fit: contain;
12637+
}
12638+
12639+
.md\:object-cover {
12640+
object-fit: cover;
12641+
}
12642+
12643+
.md\:object-fill {
12644+
object-fit: fill;
12645+
}
12646+
12647+
.md\:object-none {
12648+
object-fit: none;
12649+
}
12650+
12651+
.md\:object-scale {
12652+
object-fit: scale-down;
12653+
}
1259012654
}
1259112655

1259212656
@media (min-width: 992px) {
@@ -16480,6 +16544,26 @@ button,
1648016544
.lg\:z-auto {
1648116545
z-index: auto;
1648216546
}
16547+
16548+
.lg\:object-contain {
16549+
object-fit: contain;
16550+
}
16551+
16552+
.lg\:object-cover {
16553+
object-fit: cover;
16554+
}
16555+
16556+
.lg\:object-fill {
16557+
object-fit: fill;
16558+
}
16559+
16560+
.lg\:object-none {
16561+
object-fit: none;
16562+
}
16563+
16564+
.lg\:object-scale {
16565+
object-fit: scale-down;
16566+
}
1648316567
}
1648416568

1648516569
@media (min-width: 1200px) {
@@ -20373,4 +20457,24 @@ button,
2037320457
.xl\:z-auto {
2037420458
z-index: auto;
2037520459
}
20460+
20461+
.xl\:object-contain {
20462+
object-fit: contain;
20463+
}
20464+
20465+
.xl\:object-cover {
20466+
object-fit: cover;
20467+
}
20468+
20469+
.xl\:object-fill {
20470+
object-fit: fill;
20471+
}
20472+
20473+
.xl\:object-none {
20474+
object-fit: none;
20475+
}
20476+
20477+
.xl\:object-scale {
20478+
object-fit: scale-down;
20479+
}
2037620480
}

‎index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,43 @@
77
<link rel="stylesheet" href="./dist/styles.css">
88
</head>
99
<body class="font-sans text-black">
10+
<div class="bg-white py-8">
11+
<div class="container mx-auto px-8">
12+
<h2 class="mb-6">Object-Fit Utilities</h2>
13+
<div class="flex flex-wrap -mx-4 -mb-4">
14+
<div class="px-4 mb-4">
15+
<code class="block mb-2 text-grey-dark">.object-contain</code>
16+
<div class="h-32 w-64 bg-grey-lighter">
17+
<img class="h-full w-full object-contain" src="https://user-images.githubusercontent.com/4323180/37476373-5f8b7524-284b-11e8-8bc3-8dcb98dd2685.png" alt="">
18+
</div>
19+
</div>
20+
<div class="px-4 mb-4">
21+
<code class="block mb-2 text-grey-dark">.object-cover</code>
22+
<div class="h-32 w-64 bg-grey-lighter">
23+
<img class="h-full w-full object-cover" src="https://user-images.githubusercontent.com/4323180/37476373-5f8b7524-284b-11e8-8bc3-8dcb98dd2685.png" alt="">
24+
</div>
25+
</div>
26+
<div class="px-4 mb-4">
27+
<code class="block mb-2 text-grey-dark">.object-fill</code>
28+
<div class="h-32 w-64 bg-grey-lighter">
29+
<img class="h-full w-full object-fill" src="https://user-images.githubusercontent.com/4323180/37476373-5f8b7524-284b-11e8-8bc3-8dcb98dd2685.png" alt="">
30+
</div>
31+
</div>
32+
<div class="px-4 mb-4">
33+
<code class="block mb-2 text-grey-dark">.object-none</code>
34+
<div class="h-32 w-64 bg-grey-lighter">
35+
<img class="h-full w-full object-none" src="https://user-images.githubusercontent.com/4323180/37476373-5f8b7524-284b-11e8-8bc3-8dcb98dd2685.png" alt="">
36+
</div>
37+
</div>
38+
<div class="px-4 mb-4">
39+
<code class="block mb-2 text-grey-dark">.object-scale</code>
40+
<div class="h-32 w-64 bg-grey-lighter">
41+
<img class="h-full w-full object-scale" src="https://user-images.githubusercontent.com/4323180/37476373-5f8b7524-284b-11e8-8bc3-8dcb98dd2685.png" alt="">
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
1047
<div class="bg-grey-lighter py-8">
1148
<div class="container mx-auto px-8">
1249
<h2 class="mb-6">Simple Buttons</h2>

‎plugins/object-fit/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = function (variants) {
2+
return function ({ addUtilities }) {
3+
addUtilities({
4+
'.object-contain': { objectFit: 'contain' },
5+
'.object-cover': { objectFit: 'cover' },
6+
'.object-fill': { objectFit: 'fill' },
7+
'.object-none': { objectFit: 'none' },
8+
'.object-scale': { objectFit: 'scale-down' },
9+
}, variants)
10+
}
11+
}

‎tailwind.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -900,6 +900,7 @@ module.exports = {
900900

901901
plugins: [
902902
require('tailwindcss/plugins/container')(),
903+
require('./plugins/object-fit')(['responsive']),
903904
require('./plugins/simple-buttons')(),
904905
],
905906

0 commit comments

Comments
 (0)