1.3.0 • Published 6 years ago
@tkh/tailwind-plugin-logical-margin v1.3.0
@tkh/tailwind-plugin-logical-margin
Tailwindcss plugin for margin utilities with logical properties.
Install
npm install @tkh/tailwind-plugin-logical-marginUsage
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} |