@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} |