Package detail

@tkh/tailwind-plugin-logical-margin

tack-hammer3MIT1.3.0

Tailwindcss plugin for margin utilities with logical properties

margin, logical properties, plugin, tailwind css

readme

@tkh/tailwind-plugin-logical-margin

Tailwindcss plugin for margin utilities with logical properties.

Install

npm install @tkh/tailwind-plugin-logical-margin

Usage

Merge the plugin configuration with your tailwind.config.js

module.exports = {
  corePlugins: {
    margin: false,
  },
  variants: {
    margin: ['responsive', 'hover', 'focus'],
  },
  plugins: [require('@tkh/tailwind-plugin-logical-margin')()],
}

Adding margins

Adding margins is the same as a default Tailwindcss margin utilities except the tokens for selecting which side of an element to apply the margin.

Positional to logical mapping

positional (ltr) logical
t (top) bs (block-start)
r (right) ie (inline-end)
b (bottom) be (block-end)
l (left) is (inline-start)

Class names

margin class
all sides m-{size}
horizontal mx-{size}
vertical my-{size}
single side `m{bs ie bs is}-{size}`
negative `-m{bs ie bs is}-{size}`