twind-logical

A CSS Logical Properties and Values plugin for twind CSS.

Installation

Install from npm:

# Using npm
npm install twind-logical

# Using Yarn
yarn add twind-logical

Usage

Add to plugins of your setup call:

import twindLogical from 'twind-logical'

setup({
  plugins: {
    ...twindLogical,
  },
})

or for better browser compatibility

Note: the compat version only supports RTL and LTR

import twindLogical from 'twind-logical/compat'

setup({
  plugins: {
    ...twindLogical,
  },
})

when using the compat version

.float-start {
  float: inline-start;
}

/* ↓ ↓ ↓ */

.float-start[dir='ltr'],
[dir='ltr'] .float-start {
  float: left;
}

.float-start[dir='rtl'],
[dir='rtl'] .float-start {
  float: right;
}

What are CSS Logical Properties and Values?

In short, CSS Logical Properties and Values extend CSS for easier development when working with non-LTR (left-to-right) languages. For example, let's say you want to add padding before the start of a paragraph of text. For English, which is LTR, you would do this:

.lead-paragraph {
  padding-left: 1rem;
}

However, for Farsi, which reads right-to-left, that would cause the padding to be at the end of the text rather than the beginning, so you would have to do something like this to cover both cases:

.lead-paragraph {
  padding-left: 1rem;
}
html[dir='rtl'] .lead-paragraph {
  padding-left: 0;
  padding-right: 1rem;
}

CSS Logical Properties and Values simplifies this by abstracting away the specific directions. The above example becomes this:

.lead-paragraph {
  padding-inline-start: 1rem;
}

With one style, the padding is applied as intended for either language. For more about CSS Logical Properties and Values, see Building Multi-Directional Layouts by Ahmad El-Alfy.

What's Included

Flow-relative Values for float and clear

.float-start {
  float: inline-start;
}
.float-end {
  float: inline-end;
}
.clear-start {
  clear: inline-start;
}
.clear-end {
  clear: inline-end;
}

Flow-relative Values for text-align

.text-start {
  text-align: start;
}
.text-end {
  text-align: end;
}

Flow-relative Values for resize

.resize-block {
  resize: block;
}
.resize-inline {
  resize: inline;
}

Flow-relative Longhands for overscroll-behavior

.overscroll-b-auto {
  overscroll-behavior-block: auto;
}
.overscroll-b-contain {
  overscroll-behavior-block: contain;
}
.overscroll-b-none {
  overscroll-behavior-block: none;
}
.overscroll-i-auto {
  overscroll-behavior-inline: auto;
}
.overscroll-i-contain {
  overscroll-behavior-inline: contain;
}
.overscroll-i-none {
  overscroll-behavior-inline: none;
}

Logical Height and Logical Width

Utilities are generated for the block-size, inline-size, min-block-size, min-inline-size, max-block-size, and max-inline-size properties. These match the values in your height, width, min-height, min-width, max-height, and max-width config objects, respectively.

.bs-1 {
  block-size: 0.25rem;
}
.is-1 {
  inline-size: 0.25rem;
}
.min-bs-0 {
  min-block-size: 0;
}
.min-is-0 {
  min-inline-size: 0;
}
.max-bs-full {
  max-block-size: 100%;
}
.max-is-full {
  max-inline-size: 100%;
}

Flow-relative Margins

Utilities are generated for the margin-block-start, margin-block-end, margin-inline-start, and margin-inline-end properties, as well as for the shorthand properties margin-block and margin-inline. These match the values in your margin config object.

.mlb-1 {
  margin-block: 0.25rem;
}
.mli-1 {
  margin-inline: 0.25rem;
}
.mbs-1 {
  margin-block-start: 0.25rem;
}
.mbe-1 {
  margin-block-end: 0.25rem;
}
.mis-1 {
  margin-inline-start: 0.25rem;
}
.mie-1 {
  margin-inline-end: 0.25rem;
}

Flow-relative Padding

Utilities are generated for the padding-block-start, padding-block-end, padding-inline-start, and padding-inline-end properties, as well as for the shorthand properties padding-block and padding-end. These match the values in your padding config object.

.plb-1 {
  padding-block: 0.25rem;
}
.pli-1 {
  padding-inline: 0.25rem;
}
.pbs-1 {
  padding-block-start: 0.25rem;
}
.pbe-1 {
  padding-block-end: 0.25rem;
}
.pis-1 {
  padding-inline-start: 0.25rem;
}
.pie-1 {
  padding-inline-end: 0.25rem;
}

Flow-relative Space Between

Flow-relative utilities are generated for the Tailwind-specific Space Between. These match the values in your space config object. All of the usual positive and negative values plus .space-b-reverse and .space-i-reverse utilities are generated.

.space-b-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-b-reverse: 0;
  margin-block-start: calc(0.25rem * calc(1 - var(--tw-space-b-reverse)));
  margin-block-end: calc(0.25rem * var(--tw-space-b-reverse));
}

.space-i-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-i-reverse: 0;
  margin-inline-start: calc(0.25rem * calc(1 - var(--tw-space-i-reverse)));
  margin-inline-end: calc(0.25rem * var(--tw-space-i-reverse));
}

Flow-relative Offsets (top / right / bottom / left)

Utilities are generated for the inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end properties, as well as for the shorthand properties inset-block and inset-inline. These match the values in your inset config object.

.inset-block-0 {
  inset-block: 0;
}
.inset-inline-0 {
  inset-inline: 0;
}
.block-start-0 {
  inset-block-start: 0;
}
.block-end-0 {
  inset-block-end: 0;
}
.inline-start-0 {
  inset-inline-start: 0;
}
.inline-end-0 {
  inset-inline-end: 0;
}

Flow-relative Border Widths

Utilities are generated for the border-block-start-width, border-block-end-width, border-inline-start-width, and border-inline-end-width properties. These match the values in your borderWidth config object.

.border-bs-2 {
  border-block-start-width: 2px;
}
.border-be-2 {
  border-block-end-width: 2px;
}
.border-is-2 {
  border-inline-start-width: 2px;
}
.border-ie-2 {
  border-inline-end-width: 2px;
}

Flow-relative Divide Width

Flow-relative utilities are generated for the Tailwind-specific Divide Width. These match the values in your divideWidth config object. All of the usual values plus .divide-b, .divide-i, .divide-b-reverse and .divide-i-reverse utilities are generated.

.divide-b-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-b-reverse: 0;
  border-block-start-width: calc(2px * calc(1 - var(--tw-divide-b-reverse)));
  border-block-end-width: calc(2px * var(--tw-divide-b-reverse));
}

.divide-i-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-i-reverse: 0;
  border-inline-start-width: calc(2px * calc(1 - var(--tw-divide-i-reverse)));
  border-inline-end-width: calc(2px * var(--tw-divide-i-reverse));
}

Flow-relative Corner Rounding (border-radius)

Utility classes are generated for the border-start-start-radius, border-start-end-radius, border-end-start-radius, and border-end-end-radius properties for rounding individual corners. There are also shorthand utilities for rounding a side of an element. These match the values in your borderRadius config object.

.rounded-bs-md {
  border-start-start-radius: 0.375rem;
  border-start-end-radius: 0.375rem;
}

.rounded-be-md {
  border-end-start-radius: 0.375rem;
  border-end-end-radius: 0.375rem;
}

.rounded-is-md {
  border-start-start-radius: 0.375rem;
  border-end-start-radius: 0.375rem;
}

.rounded-ie-md {
  border-start-end-radius: 0.375rem;
  border-end-end-radius: 0.375rem;
}

.rounded-ss-md {
  border-start-start-radius: 0.375rem;
}
.rounded-se-md {
  border-start-end-radius: 0.375rem;
}
.rounded-es-md {
  border-end-start-radius: 0.375rem;
}
.rounded-ee-md {
  border-end-end-radius: 0.375rem;
}

What's Not Included

While everything in the CSS Logical Properties and Values Level 1 specification has been evaluated and most features are supported, this plugin does not generate utilities for everything. If something does not have a non-logical equivalent in Tailwind's defaults, it is not supported.

• Logical Values for the caption-side property: Tailwind does not have caption-side utilities.
• Flow-relative Border Width shorthand properties border-block-width and border-block-height: Tailwind does not have border-width shorthand utilities for the X or Y axis.
• Flow-relative Border Styles: Tailwind only has border-style utilities for all sides of an element at once.
• Flow-relative Border Colors: Same as for Border Styles.

As for other logical properties and values from outside of the main specification:

• Flow-relative Overflow properties overflow-block and overflow-inline: while Tailwind does support overflow, this plugin does not support overflow-block or overflow-inline yet, due to a lack of browser support and polyfills. As of March 2021, only Firefox supports them, and as far as I can tell there are no polyfills available. (Neither postcss-preset-env nor postcss-logical apply any transformations on these properties.)

If there are any notable omissions that