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

Reintroduce ability for screens to be passed explicitly

Browse Source
This commit is contained in:
Adam Wathan 2019-03-14 14:54:20 -04:00
parent c6449f8fa8
commit fefc53b88b
2 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
__tests__/containerPlugin.test.js
View File

@ -41,6 +41,29 @@ test.only('options are not required', () => {
`)
})
test.only('screens can be passed explicitly', () => {
const { components } = processPlugins(
[container()],
config({
theme: {
container: {
screens: ['400px', '500px'],
},
},
})
)
expect(css(components)).toMatchCss(`
.container { width: 100% }
@media (min-width: 400px) {
.container { max-width: 400px }
}
@media (min-width: 500px) {
.container { max-width: 500px }
}
`)
})
test.only('the container can be centered by default', () => {
const { components } = processPlugins(
[container()],
@ -113,6 +136,7 @@ test.only('setting all options at once', () => {
config({
theme: {
container: {
screens: ['400px', '500px'],
center: true,
padding: '2rem',
},
@ -128,17 +152,11 @@ test.only('setting all options at once', () => {
padding-right: 2rem;
padding-left: 2rem
}
@media (min-width: 576px) {
.container { max-width: 576px }
@media (min-width: 400px) {
.container { max-width: 400px }
}
@media (min-width: 768px) {
.container { max-width: 768px }
}
@media (min-width: 992px) {
.container { max-width: 992px }
}
@media (min-width: 1200px) {
.container { max-width: 1200px }
@media (min-width: 500px) {
.container { max-width: 500px }
}
`)
})

2
src/plugins/container.js
View File

@ -24,7 +24,7 @@ function extractMinWidths(breakpoints) {
module.exports = function() {
return function({ addComponents, config }) {
const minWidths = extractMinWidths(config('theme.screens'))
const minWidths = extractMinWidths(config('theme.container.screens', config('theme.screens')))
const atRules = _.map(minWidths, minWidth => {
return {