tailwindcss-collapsible-padding

0.1.0 • Public • Published

tailwindcss-collapsible-padding

A tailwindcss plugin that makes paddings collapsible with the descendant elements.

Why ?

Collapsible padding aims to apply vertical padding on any element while ensuring those padding will blend with the margin-top of its first child and the margin bottom of its last child.

Common issue: you apply a padding on a div which contains headings and paragraphs. By default this padding adds up to the margin of the headings and the paragraphs.

non-collapsible example

With collapsible padding, the spacings blend together.

collapsible example

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-collapsible-padding

# Using Yarn
yarn add tailwindcss-collapsible-padding

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-collapsible-padding'),
    // ...
  ],
  variants: {
    extend: {
      padding: ['collapsible'] // enable the variant on padding utilities
    },
  },
}

Usage

To make a padding collapsible, you need to prefix the utility class with the variant collapsible:

<div class="collapsible:p-4">...</div>

This variant works on direction-specific utilities:

<div class="collapsible:pt-4 collapsible:pb-8">...</div>

The variant does not work on horizontal-only utilities (px-, pl-, pr-)

This variant can be combined with a responsive variant:

<div class="collapsible:py-4 md:collapsible:py-8">...</div>

Before using it

Before using this variant, you need to be aware that collapsible paddings rely on the ::before and ::after pseudo-elements.

Example of a padding top:

.collapsible\:pt-8::before {
  content: "";
  display: table;
  margin-bottom: 2rem;
}

That's right, the padding is a margin under the hood. Keep in mind that margin collapsing is a thing only in a normal flow.

What about the display: table; ?
This declaration allows the element to exist in the flow while having no content nor any dimension (0x0).

Readme

Keywords

none

Package Sidebar

Install

npm i tailwindcss-collapsible-padding

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

9.07 kB

Total Files

5

Last publish

Collaborators

  • adrgautier