wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add background size utilities

Browse source
This commit is contained in:
Adam Wathan 2017-08-26 13:59:07 -04:00
parent d7d21f9f31
commit a594a861e9
4 changed files with 57 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

40
dist/tailwind.css vendored
View file

@ -191,6 +191,14 @@ body {
background-color: #fdf2f5;
}
.bg-cover {
background-size: cover;
}
.bg-contain {
background-size: contain;
}
.shadow-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
@ -528,6 +536,14 @@ body {
background-color: #fdf2f5;
}
.sm\:bg-cover {
background-size: cover;
}
.sm\:bg-contain {
background-size: contain;
}
.sm\:shadow-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
@ -866,6 +882,14 @@ body {
background-color: #fdf2f5;
}
.md\:bg-cover {
background-size: cover;
}
.md\:bg-contain {
background-size: contain;
}
.md\:shadow-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
@ -1204,6 +1228,14 @@ body {
background-color: #fdf2f5;
}
.lg\:bg-cover {
background-size: cover;
}
.lg\:bg-contain {
background-size: contain;
}
.lg\:shadow-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}
@ -1542,6 +1574,14 @@ body {
background-color: #fdf2f5;
}
.xl\:bg-cover {
background-size: cover;
}
.xl\:bg-contain {
background-size: contain;
}
.xl\:shadow-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
}

2
dist/tailwind.css.map vendored
View file

File diff suppressed because one or more lines are too long

12
src/generators/backgroundSize.js Normal file
View file

@ -0,0 +1,12 @@
const defineClasses = require('../util/defineClasses')
module.exports = function () {
return defineClasses({
bgCover: {
backgroundSize: 'cover',
},
bgContain: {
backgroundSize: 'contain',
},
})
}

10
src/lib/generateUtilities.js
View file

@ -1,7 +1,4 @@
const _ = require('lodash')
const backgroundColors = require('../generators/backgroundColors')
const shadows = require('../generators/shadows')
const flex = require('../generators/flex')
const responsive = require('../util/responsive')
module.exports = function (options) {
@ -9,9 +6,10 @@ module.exports = function (options) {
css.walkAtRules('tailwind', atRule => {
if (atRule.params === 'utilities') {
const utilities = _.flatten([
backgroundColors(options),
shadows(options),
flex(),
require('../generators/backgroundColors')(options),
require('../generators/backgroundSize')(options),
require('../generators/shadows')(options),
require('../generators/flex')(options),
])
css.insertBefore(atRule, responsive(utilities))
atRule.remove()