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