# tailwindcss-logical

> A CSS Logical Properties and Values plugin for Tailwind CSS.

Latest version **5.0.0** (published 2026-08-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-logical
pnpm add tailwindcss-logical
yarn add tailwindcss-logical
bun add tailwindcss-logical
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-08-17 |
| First published | 2020-02-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 961 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Steve Cochrane |
| Maintainers | stevecochrane |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-logical
- Repository: https://codeberg.org/stevecochrane/tailwindcss-logical
- npm.io page: https://npm.io/package/tailwindcss-logical

## Recent versions

- 5.0.0 (latest) — 2026-08-17
- 4.2.0 — 2026-01-17
- 4.1.0 — 2025-11-10
- 4.0.0 — 2025-03-13
- 3.0.1 — 2023-04-26
- 3.0.0 — 2021-12-19
- 2.0.0 — 2021-08-05
- 1.4.0 — 2021-03-20
- 1.3.0 — 2020-12-07
- 1.2.1 — 2020-11-28
- 1.2.0 — 2020-11-22
- 1.1.0 — 2020-11-13
- 1.0.4 — 2020-07-21
- 1.0.3 — 2020-03-15
- 1.0.2 — 2020-03-15
- … 3 more at https://npm.io/package/tailwindcss-logical/versions

## README

# tailwindcss-logical

[![NPM](https://img.shields.io/npm/v/tailwindcss-logical.svg)](https://codeberg.org/stevecochrane/tailwindcss-logical/releases)
[![Downloads](https://img.shields.io/npm/dt/tailwindcss-logical.svg)](https://www.npmjs.com/package/tailwindcss)
[![License](https://img.shields.io/npm/l/tailwindcss-logical.svg)](https://codeberg.org/stevecochrane/tailwindcss-logical/src/branch/main/LICENSE.txt)

A [CSS Logical Properties and Values](https://www.w3.org/TR/css-logical-1/) plugin for
[Tailwind CSS](https://tailwindcss.com), compatible with Tailwind v4.2.0+. For compatibility with earlier versions of
v4, use v4.2.0 of this plugin, and for Tailwind v3, use v3.0.1 of this plugin.

## 🎉 You don't need this plugin anymore! 🎉

With the [v4.2.0 release](https://github.com/tailwindlabs/tailwindcss/releases#release-v4.2.0) of Tailwind in February
2026, Tailwind now natively supports everything that this plugin provides, with some very minor exceptions. I don't
see a need for this plugin anymore and I encourage everyone using it to consider adopting the native classes.

I've written a
[Migration Guide](https://codeberg.org/stevecochrane/tailwindcss-logical/src/branch/main/docs/migration-guide.md) with
instructions on how to find-and-replace your tailwindcss-logical classes with the Tailwind-native classes.

I'll continue to maintain tailwindcss-logical for the time being since it still gets a lot of downloads, but once
it loses popularity I'll consider deprecating it. However, if you use tailwindcss-logical and still see a reason for it
to exist, please [file an issue](https://codeberg.org/stevecochrane/tailwindcss-logical/issues) or
[send me an email](https://codeberg.org/stevecochrane/tailwindcss-logical/#contact) and let me know, because it's
likely there are use cases I'm not aware of.

## Demo

View the [demo page](https://stevecochrane.com/tailwindcss-logical/) for a visual walkthrough, or read on to get
started.

## Usage

Install [tailwindcss-logical](https://www.npmjs.com/package/tailwindcss-logical) as a dependency of your project:

```bash
npm install tailwindcss-logical --save-dev
```

Use the `@plugin` directive in your main CSS file to load it after importing Tailwind itself:

```css
@import "tailwindcss";

@plugin "tailwindcss-logical";
```

Now you can start using the new classes in your templates! Also if you have `--spacing-*` variables defined with the
`@theme` directive, this plugin will generate spacing utilities for those variables too.
([More on theme variables](https://tailwindcss.com/docs/theme))

## 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:

```css
.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:

```css
.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:

```css
.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](https://css-tricks.com/building-multi-directional-layouts/) by Ahmad
El-Alfy.

## What's Included

### Flow-relative Values for `resize`

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

### Flow-relative Overflow

```css
.overflow-b-hidden {
  overflow-block: hidden;
}
.overflow-i-hidden {
  overflow-inline: hidden;
}
```

### Flow-relative Longhands for `overscroll-behavior`

```css
.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 have the same range of values as `height`, `width`, `min-height`, `min-width`,
`max-height`, and `max-width`, respectively.

```css
.bs-1 {
  block-size: calc(var(--spacing) * 1);
}
.is-1 {
  inline-size: calc(var(--spacing) * 1);
}
.min-bs-0 {
  min-block-size: calc(var(--spacing) * 0);
}
.min-is-0 {
  min-inline-size: calc(var(--spacing) * 0);
}
.max-bs-full {
  max-block-size: 100%;
}
.max-is-full {
  max-inline-size: 100%;
}
```

### Flow-relative Margins

Utilities are generated for the `margin-inline-start` and `margin-inline-end` properties, as well as for the shorthand
properties `margin-block` and `margin-inline`. These have the same range of values as other `margin` utilities.

```css
.mlb-1 {
  margin-block: calc(var(--spacing) * 1);
}
.mli-1 {
  margin-inline: calc(var(--spacing) * 1);
}
.mis-1 {
  margin-inline-start: calc(var(--spacing) * 1);
}
.mie-1 {
  margin-inline-end: calc(var(--spacing) * 1);
}
```

### Flow-relative Padding

Utilities are generated for the `padding-inline-start` and `padding-inline-end` properties, as well as for the
shorthand properties `padding-block` and `padding-end`. These have the same range of values as other `padding`
utilities.

```css
.plb-1 {
  padding-block: calc(var(--spacing) * 1);
}
.pli-1 {
  padding-inline: calc(var(--spacing) * 1);
}
.pis-1 {
  padding-inline-start: calc(var(--spacing) * 1);
}
.pie-1 {
  padding-inline-end: calc(var(--spacing) * 1);
}
```

### Flow-relative Space Between

Flow-relative utilities are generated for the Tailwind-specific [Space Between](https://tailwindcss.com/docs/space).
These have the same range of values as other `space` utilities. All of the usual positive and negative values plus
`.space-b-reverse` and `.space-i-reverse` utilities are generated.

```css
.space-b-1 > :not(:last-child) {
  --tw-space-b-reverse: 0;
  margin-block-start: calc(
    calc(var(--spacing) * 1) * calc(1 - var(--tw-space-b-reverse))
  );
  margin-block-end: calc(calc(var(--spacing) * 1) * var(--tw-space-b-reverse));
}

.space-i-1 > :not(:last-child) {
  --tw-space-i-reverse: 0;
  margin-inline-start: calc(
    calc(var(--spacing) * 1) * calc(1 - var(--tw-space-i-reverse))
  );
  margin-inline-end: calc(calc(var(--spacing) * 1) * 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 have the
same range of values as other `inset` utilities.

```css
.inset-block-0 {
  inset-block: calc(var(--spacing) * 0);
}
.inset-inline-0 {
  inset-inline: calc(var(--spacing) * 0);
}
.block-start-0 {
  inset-block-start: calc(var(--spacing) * 0);
}
.block-end-0 {
  inset-block-end: calc(var(--spacing) * 0);
}
.inline-start-0 {
  inset-inline-start: calc(var(--spacing) * 0);
}
.inline-end-0 {
  inset-inline-end: calc(var(--spacing) * 0);
}
```

### Flow-relative Border Widths

Utilities are generated for the `border-block-width`, `border-inline-width`, `border-inline-start-width`, and
`border-inline-end-width` properties. These have the same range of values as other `borderWidth` utilities.

```css
.border-lb-2 {
  border-block-width: 2px;
}
.border-li-2 {
  border-inline-width: 2px;
}
.border-is-2 {
  border-inline-start-width: 2px;
}
.border-ie-2 {
  border-inline-end-width: 2px;
}
```

### Flow-relative Border Colors

Utilities are generated for the `border-block-color`, `border-inline-color`, `border-inline-start-color`, and
`border-inline-end-color` properties. These have the same range of values as other `borderColor` utilities.

```css
.border-lb-black {
  border-block-color: var(--color-black);
}
.border-li-black {
  border-inline-color: var(--color-black);
}
.border-is-black {
  border-inline-start-color: var(--color-black);
}
.border-ie-black {
  border-inline-end-color: var(--color-black);
}
```

### Flow-relative Divide Width

Flow-relative utilities are generated for the Tailwind-specific
[Divide Width](https://tailwindcss.com/docs/divide-width). These have the same range of values as other `divide`
utilities. All of the usual values plus `.divide-b`, `.divide-i`, `.divide-b-reverse` and `.divide-i-reverse` utilities
are generated.

```css
.divide-b-2 > :not(:last-child) {
  --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(:last-child) {
  --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`)

Shorthand utility classes are generated for rounding each side of an element. Utility classes for each individual
corner are already provided by Tailwind itself. These have the same range of values as other `borderRadius` utilities.

```css
.rounded-bs-md {
  border-start-start-radius: var(--radius-md);
  border-start-end-radius: var(--radius-md);
}

.rounded-be-md {
  border-end-start-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.rounded-is-md {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.rounded-ie-md {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}
```

## What's Not Included

While everything in the [CSS Logical Properties and Values Level 1](https://www.w3.org/TR/css-logical-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 only has `caption-side` utilities for the vertical axis, and
  according to the spec, `top` and `bottom` qualify as logical values already.
- Flow-relative Border Styles: Tailwind only has `border-style` utilities for all sides of an element at once.

If there are any notable omissions that you think should be supported, please
[file an issue](https://codeberg.org/stevecochrane/tailwindcss-logical/issues) and let me know.

## Browser Compatibility

Browser support for CSS Logical Properties and Values has come a long way. As of June 2024, all of the utilities
provided with this plugin are supported in at least the last two major versions of all of the following browsers: Edge,
Firefox, Chrome, Safari, Safari for iOS, Chrome for Android, and more.

If some utilities don't seem to work correctly, you can refer to [Can I use...](https://caniuse.com/) to see if that
property or value is supported by your browser. Relevant Can I use... links for each set of utilities are included in
the [demo page](https://stevecochrane.com/tailwindcss-logical/).

If better browser support for legacy browsers is required, you can use [PostCSS](https://postcss.org) to improve
compatibility. Here are two possible solutions:

1. [postcss-preset-env](https://github.com/csstools/postcss-preset-env) set to `stage: 2` or lower
2. [postcss-logical](https://github.com/csstools/postcss-logical) followed by
   [postcss-dir-pseudo-class](https://github.com/jonathantneal/postcss-dir-pseudo-class)

If you take your output styles from Tailwind and run them through either of the above, your logical properties and
values will be converted to attribute selectors that any browser can understand.

```css
/* Default */
.float-start {
  float: inline-start;
}

/* With postcss-preset-env, or postcss-logical and postcss-dir-pseudo-class applied */
[dir="ltr"] .float-start {
  float: left;
}
[dir="rtl"] .float-start {
  float: right;
}
```

## Roadmap

At this point I consider this plugin feature complete, but I will continue to monitor official specifications, as well
as Tailwind itself, and update this plugin accordingly when anything changes.

I've tried dropping the legacy plugin API and building entirely with CSS the Tailwind v4 way, though the documentation
isn't enough for my needs and all of the official Tailwind plugins still use the legacy API, so I haven't seen any
functional examples. I might try again at some point if more examples appear and if there's enough value in doing so.

## Contributing / Issues

If you don't have a Codeberg account, Codeberg does allow you to sign in with a GitHub account. If you're not
interested in using Codeberg but you have an issue or a contribution idea, please feel free to send me an email. I'd be
glad to write up an issue or pull request for you and credit you by name / GitHub account if you like.
[My email address is below.](https://codeberg.org/stevecochrane/tailwindcss-logical/#contact)

If you would like to make a contribution yourself, pull requests are totally welcome, though I recommend starting by
[filing an issue](https://codeberg.org/stevecochrane/tailwindcss-logical/issues).

Updating the unit tests is a real pain and I would not wish that upon anybody, especially someone kind enough to
contribute to this project, so if you contribute an update to the plugin, I can handle the tests.

1. Fork the project
2. Check out a feature branch (e.g. `git checkout -b feature-foo-bar`)
3. Commit changes (e.g. `git commit -am 'Add foo bar'`)
4. Push the branch (e.g. `git push origin feature-foo-bar`)
5. Create a new pull request

## Thanks

Mona Uppenkamp ([@MUppenkamp on GitHub](https://github.com/MUppenkamp)) for contributing support for custom spacing
variables.

Mohamed Ashraf (سعدني, [@sa3dany on GitHub](https://github.com/sa3dany)) for making the demo more prominent in the
README.

## Contact

Steve Cochrane (steve@stevecochrane.com)

---
_Source: https://npm.io/package/tailwindcss-logical · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._