An unofficial Tailwind plugin attempting to ease fluid layout implementation.
npm i -D @numbered/tailwind-fluid-layout-systemThen import the plugin to your tailwind.config.js, add configure it.
const fls = require('@numbered/tailwind-fluid-layout-system')
module.exports = {
theme: {
grid: {
mobile: {
columns: 10,
mockupWidth: 375,
gutter: 10,
margin: 20
},
tablet: {
columns: 10,
mockupWidth: 768,
gutter: 10,
margin: 30,
screen: 'md'
},
desktop: {
columns: 12,
mockupWidth: 1440,
gutter: 20,
margin: 60,
maxWidth: 1920,
fontScalingMaxWidth: 1540,
screen: 'lg'
}
}
},
plugins: [fls({
color: 'red',
enabled: process.env.NODE_ENV === 'development'
})]
}While CSS grid layout allows to build complex grid systems, CSS subgrid is currently not supported on most web browser and cannot be used, thus, nested components cannot inherit parent layout.
This plugins add some utility classes to manage a simple grid system with optional gutters.
👉 Demo
In case you set a max-width to one of your grid layout, you'll need to wrap your content in a grid-container class.
<div className='grid-container'>
[...]
</div>A span defines a number of columns. It can be called with any Tailwind spacing or sizing utility: span-{spacing|sizing}-{size}.
You can prefix it with -wide or -widerto respectively add one or two gutters.
<div className="span-w-2">A 2 column span</div>
<div className="span-w-2-wide">A 2 column span with 1 gutter</div>
<div className="span-w-2-wider">A 2 column span with 2 gutters</div>Available utilities:
| Class |
|---|
| span-w-{size}-{?wide|wider} |
| span-min-w-{size}-{?wide|wider} |
| span-max-w-{size}-{?wide|wider} |
| span-h-{size}-{?wide|wider} |
| span-min-h-{size}-{?wide|wider} |
| span-max-h-{size}-{?wide|wider} |
| span-p-{size}-{?wide|wider} |
| span-px-{size}-{?wide|wider} |
| span-py-{size}-{?wide|wider} |
| span-pt-{size}-{?wide|wider} |
| span-pr-{size}-{?wide|wider} |
| span-pb-{size}-{?wide|wider} |
| span-pl-{size}-{?wide|wider} |
| span-m-{size}-{?wide|wider} |
| span-mx-{size}-{?wide|wider} |
| span-my-{size}-{?wide|wider} |
| span-mt-{size}-{?wide|wider} |
| span-mr-{size}-{?wide|wider} |
| span-mb-{size}-{?wide|wider} |
| span-ml-{size}-{?wide|wider} |
| span-gap-{size}-{?wide|wider} |
A gutter defines a number of columns. It can be called with any Tailwind spacing or sizing utility: gutter-{spacing|sizing}-{size}
<div className="gutter-ml-1">A margin left of 1 gutter</div>Available utilities:
| Class |
|---|
| gutter-w-{size} |
| gutter-min-w-{size} |
| gutter-max-w-{size} |
| gutter-h-{size} |
| gutter-min-h-{size} |
| gutter-max-h-{size} |
| gutter-p-{size} |
| gutter-px-{size} |
| gutter-py-{size} |
| gutter-pt-{size} |
| gutter-pr-{size} |
| gutter-pb-{size} |
| gutter-pl-{size} |
| gutter-m-{size} |
| gutter-mx-{size} |
| gutter-my-{size} |
| gutter-mt-{size} |
| gutter-mr-{size} |
| gutter-mb-{size} |
| gutter-ml-{size} |
| gutter-gap-{size} |
A margin defines the outter grid margin number of columns. It can be called with any Tailwind spacing or sizing utility: span-{spacing|sizing}-{size}
<div className="margin-pl-1">A padding left of 1 grid margin</div>Available utilities:
| Class |
|---|
| margin-w-{size} |
| margin-min-w-{size} |
| margin-max-w-{size} |
| margin-h-{size} |
| margin-min-h-{size} |
| margin-max-h-{size} |
| margin-p-{size} |
| margin-px-{size} |
| margin-py-{size} |
| margin-pt-{size} |
| margin-pr-{size} |
| margin-pb-{size} |
| margin-pl-{size} |
| margin-m-{size} |
| margin-mx-{size} |
| margin-my-{size} |
| margin-mt-{size} |
| margin-mr-{size} |
| margin-mb-{size} |
| margin-ml-{size} |
| margin-gap-{size} |