A CSS Logical Properties and Values plugin for twind
MIT License
A CSS Logical Properties and Values plugin for twind CSS.
Install from npm:
# Using npm
npm install twind-logical
# Using Yarn
yarn add twind-logical
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;
}
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.
float
and clear
.float-start {
float: inline-start;
}
.float-end {
float: inline-end;
}
.clear-start {
clear: inline-start;
}
.clear-end {
clear: inline-end;
}
text-align
.text-start {
text-align: start;
}
.text-end {
text-align: end;
}
resize
.resize-block {
resize: block;
}
.resize-inline {
resize: inline;
}
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;
}
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%;
}
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;
}
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 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));
}
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;
}
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 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));
}
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;
}
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.
caption-side
property: Tailwind does not have caption-side
utilities.border-block-width
and border-block-height
: Tailwind does notborder-width
shorthand utilities for the X or Y axis.border-style
utilities for all sides of an element at once.As for other logical properties and values from outside of the main specification:
overflow-block
and overflow-inline
: while Tailwind does support overflow
,overflow-block
or overflow-inline
yet, due to a lack of browser support andIf there are any notable omissions that you think should be supported, please file an issue and let me know.
CSS Logical Properties and Values is a fairly new (and still evolving) specification, so browser support varies. None of the logical properties and values are supported in Internet Explorer 11, and some, such as Flow-relative Offsets and Corner Rounding, are currently only supported in Firefox and Chrome as of March 2021.
If some utilities don't seem to work correctly, be sure to check Can I use... to see if that property or value is supported by your browser.