@tkh/tailwind-plugin-logical-padding
Tailwindcss plugin for padding utilities with logical properties.
Install
npm install @tkh/tailwind-plugin-logical-padding
Usage
Merge the plugin configuration with your tailwind.config.js
module.exports = {
corePlugins: {
padding: false,
},
variants: {
padding: ['responsive', 'hover', 'focus'],
},
plugins: [require('@tkh/tailwind-plugin-logical-padding')()],
}
Adding padding
Adding padding is the same as a default Tailwindcss padding utilities except the tokens for selecting which side of an element to apply the padding.
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
padding | class |
---|---|
all sides | p-{size} |
horizontal | px-{size} |
vertical | py-{size} |
single side | `p{bs |
negative | `-p{bs |