@tkh/tailwind-plugin-logical-padding

1.2.0 • Public • Published

@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

Package Sidebar

Install

npm i @tkh/tailwind-plugin-logical-padding

Weekly Downloads

0

Version

1.2.0

License

MIT

Unpacked Size

6.42 kB

Total Files

7

Last publish

Collaborators

  • romain742
  • thierrywould