BLACK LIVES MATTER
Be aware. Be angry. Do better. Demand change. Show your support any way you can. Click on the link above to find protests, petitions, and other ways to help. DO NOT LET IT GO SILENT.
Gap Plugin for Tailwind CSS
Introduction
Tailwind 1.2 comes with gap
, row-gap
, and col-gap
utilities, but the underlying CSS properties only work in the context of CSS Grid at the moment (except in Firefox which also supports gap
in Flexbox). This plugin uses a known workaround to achieve the same thing in Flexbox or even in good old block layout, which is to apply negative margin on the container element and positive margin or padding on the children. Since there is a naming conflict with Tailwind’s gap-*
classes, this plugin uses c-gap-*
by default, but you can customize the c-
prefix with the prefix
option. You can even use an empty prefix to generate gap-*
classes and disable Tailwind’s native gap utilities by setting gap
to false
in your config’s corePlugins
object if you don’t plan on using CSS Grid.
Requirements
This plugin requires Tailwind CSS 1.5 or later. If your project uses an older version of Tailwind, you should install the latest 3.x version of this plugin (npm install tailwindcss-gap@3.x
).
Installation
npm install tailwindcss-gap
Usage
// tailwind.config.jsmoduleexports = target: 'ie11' // if you want IE11 support, set this and the plugin will generate IE-compatible CSS (which is much larger because it cannot use custom properties) theme: gap: // defaults to theme => theme('spacing') as per Tailwind 1.2 '0': '0' '1': '0.25rem' '2': '0.5rem' '3': '0.75rem' '4': '1rem' variants: gap: 'responsive' // defaults to ['responsive'] as per Tailwind 1.2 plugins: prefix: 'c-' // defaults to 'c-' ;
This plugin generates the following CSS (in the @tailwind components
layer, so that padding and margin utilities can override gap utilities):
/* etc. */ /* etc. */
Which you can then use in your HTML like this:
Column 1 Column 2
The c-gap-wrapper
element is not required, but strongly recommended to avoid issues related to collapsing margins. You should also add overflow-hidden
to that element if you can in order to prevent unwanted horizontal scrolling caused by the negative margins. Any margin, padding, border, or background utilities should be added to the c-gap-wrapper
element rather than the c-gap
or c-gap-padding
. Note that you cannot nest c-gap
elements directly, but you can nest them by using c-gap-wrapper
:
First Second Third First Second Third
It is also strongly recommended to use c-gap
on flex
containers since margins don’t collapse between flex items. If you want to apply a gap between items inside a regular block container, you should use c-gap-padding
instead of c-gap
for the gaps to be the expected size:
First item Second item Third item