archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add ability to configure background position utilities

Browse Source
This commit is contained in:
Benoît Rouleau 2019-01-02 17:32:02 -05:00
parent ba86cb37d3
commit 85ea38b2f5
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
defaultConfig.stub.js
View File

@ -367,6 +367,33 @@ module.exports = {
backgroundColors: colors,
/*
|-----------------------------------------------------------------------------
| Background positions https://tailwindcss.com/docs/background-positions
|-----------------------------------------------------------------------------
|
| Here is where you define your background positions. We provide some
| common values that are useful in most projects, but feel free to add
| other positions that are specific to your project here as well.
|
| Class name: .bg-{position}
| CSS property: background-position
|
*/
backgroundPosition: {
'bottom': 'bottom',
'center': 'center',
'left': 'left',
'left-bottom': 'left bottom',
'left-top': 'left top',
'right': 'right',
'right-bottom': 'right bottom',
'right-top': 'right top',
'top': 'top',
},
/*
|-----------------------------------------------------------------------------
| Background sizes https://tailwindcss.com/docs/background-size

19
src/generators/backgroundPosition.js
View File

@ -1,15 +1,10 @@
import defineClasses from '../util/defineClasses'
import _ from 'lodash'
import defineClass from '../util/defineClass'
export default function() {
return defineClasses({
'bg-bottom': { 'background-position': 'bottom' },
'bg-center': { 'background-position': 'center' },
'bg-left': { 'background-position': 'left' },
'bg-left-bottom': { 'background-position': 'left bottom' },
'bg-left-top': { 'background-position': 'left top' },
'bg-right': { 'background-position': 'right' },
'bg-right-bottom': { 'background-position': 'right bottom' },
'bg-right-top': { 'background-position': 'right top' },
'bg-top': { 'background-position': 'top' },
export default function({ backgroundPosition }) {
return _.map(backgroundPosition, (position, className) => {
return defineClass(`bg-${className}`, {
'background-position': position,
})
})
}