tailwindcss-simple-grid
v0.0.2
Published
```js const grid = require('tailwindcss-simple-grid')
Downloads
103
Readme
tailwindcss-simple-grid
const grid = require('tailwindcss-simple-grid')
module.exports = {
theme: {
width: theme => ({
auto: 'auto',
full: '100%',
...grid(theme)
}),
margin: theme => ({
...grid(theme),
...grid.negative(theme)
}),
grid: {
columns: 12,
gutter: 32,
container: {
maxWidth: 1280,
gutter: {
_: 25,
md: 50
}
}
}
},
plugins: [grid],
corePlugins: {
container: false
}
}
Output
.container {
width: 100%;
max-width: 1280px;
padding-left: 25px;
padding-right: 25px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.container {
padding-left: 50px;
padding-right: 50px;
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -16px;
margin-right: -16px;
}
.col {
width: 100%;
flex: none;
padding-left: 16px;
padding-right: 16px;
}