v4.1.0

New Feature

If you have --spacing-* variables declared in your @theme block, tailwindcss-logical will now generate utility classes with those variables for all spacing-related properties.

For example if you have the following declared in your CSS:

@theme {
  --spacing-name-here: calc(var(--spacing) * 35);
}

You can now use a class of class="bs-name-here" in your HTML, and tailwindcss-logical will generate the following utility class:

.bs-name-here {
  block-size: calc(var(--spacing) * 35);
}

This applies to all of the following: block-size, inline-size, inset, margin, max-block-size, max-inline-size, min-block-size, min-inline-size, padding, and space-b/space-i.

Many thanks to Mona Uppenkamp (@MUppenkamp) for the suggestion and for the initial implementation! This addresses #64.

v4.0.0

Welcome to the Tailwind v4 compatibility release!

Breaking Changes

• tailwindcss-logical v4.0.0+ is only compatible with tailwindcss v4.0.0+. If you have not yet updated to tailwindcss v4.0.0+, please continue using tailwindcss-logical v3.0.1.

Fixes

• Fixed a import of an internal Tailwind file that no longer exists in tailwindcss v4.0.0+, which would cause the plugin to fail and throw errors when used with tailwindcss v4.0.0+.

Updates

• You can now use this plugin with Tailwind v4 by using the @plugin directive in your main CSS file. See the README for an example.
• This release is not just compatible with Tailwind v4; we've taken effort to match Tailwind v4's output for the non-logical properties and values as much as possible. The main difference is that all of the spacing utilities such as block-size have calculated values from the --spacing custom property, just like the equivalent properties in Tailwind itself.
• Removed the float,clear, and text-align utilities.
  • These were added to Tailwind itself in an earlier release, so it's no longer necessary for the plugin to generate them.
• Removed the single-corner border-radius utilities.
  • These were added to Tailwind itself in v4. The single-side utilities (rounded-bs, rounded-be, etc.) are still provided.
• Space Between and Divide Width selectors have been updated and simplified to match the selectors used in Tailwind v4.
• The plugin now declares tailwindcss as a peer dependency, not a dependency, so there is no longer a duplicate installation of the tailwindcss module and the versions are always in sync.

v3.0.1

• Now that Tailwind CSS has added native support for some Logical Properties and Values with tailwindcss v3.3.0, this project's README has been updated with a recommendation to use the native support first, if it is sufficient.
• Since it has been more than a year since this project was last updated, the tailwindcss dependency has been updated to the latest, v3.3.1. This should have no effect on the generated styles.

v3.0.0

Breaking Change

With Tailwind v3, JIT mode is now the default, where previously it was something to opt in to. Because of this, tailwindcss-logical will no longer work with the previous default, the AOT engine. I recommend updating to tailwindcss-logical v3.0.0 if you are on Tailwind v3, and if not, stick with tailwindcss-logical v2.0.0 until then.

New Features

• Compatibility with the recently released Tailwind v3.
• Arbitrary values are now supported for all tailwindcss-logical utilities.
• border-block-width, border-inline-width, border-block-color, and border-inline-color utilities have been added, now that Tailwind v3 added support for horizontal and vertical side utilities for Border Width and Border Color.

Per-side Border Colors, JIT Tests

Breaking Change

• Support for Node v10 has been dropped. This was necessary to support Tailwind's Just-in-Time (JIT) Mode, which uses Node language features that are not supported in Node v10.

New Features

• Support for Flow-relative Border Colors has been added. These were not previously supported because Tailwind did not support Per-side Border Colors (e.g. border-left-color, border-right-color, etc.), but now that Tailwind has added support for them in v2.2.0, this plugin now supports the logical equivalents. More information about these can be found in the README or demo page.
• Lots of tests have been added to ensure that this plugin supports JIT Mode properly. All of the JIT-specific New Features have been tested, and all of them work with this plugin, with the exception of Arbitrary Values.
• Dark Mode has also been tested to ensure compatibility.

Demo Improvements

There are no updates to the plugin itself with this release, but the demo page has been greatly improved. What was there before was very rudimentary and mostly unstyled, but now it's a real thing. Check it out here.

Space Between, Divide Width, and Overscroll Behavior

• New flow-relative utilities have been added for the following:
  • Space Between (added in Tailwind v1.3.0)
  • Divide Width (added in Tailwind v1.3.0)
  • overscroll-behavior (added in Tailwind v1.6.0)
• This changes the aim of the plugin a bit. Previously I was strictly sticking to the CSS Logical Properties and Values specification to determine what to support, but there are features from outside of that spec that also have logical properties and values (like CSS Overscroll Behavior Model Level 1) as well as Tailwind-specific utilities such as Space Between that would also benefit from having flow-relative utilities. So the new approach is, if Tailwind provides a feature by default, and there is a logical equivalent to that feature, this plugin should provide logical utilities for it, if browser support is good enough.
• Speaking of browser support not being good enough: Flow-relative Overflow Properties were also evaluated for this release, since Tailwind provides overflow utilities, but after taking a closer look I've decided not to include them, because browser support is currently very early (only Firefox currently supports them) and there are no available polyfills that I know of.

Demo Layout Bug Fix

Updated usage of the clearfix class (deprecated in Tailwind v2) in the demo page to flow-root to fix a couple layout bugs.

Tailwind v2 Compatibility

• Added compatibility with the newly released Tailwind v2.
  • Added support for DEFAULT config keys. For utilities that have a "default" key (border-width and border-radius), Tailwind v1 used default while Tailwind v2 uses DEFAULT. This plugin now allows for both.
  • Updated tests with the new Tailwind v2 default config values.

Code Quality Improvements

• Added a Jest test suite to ensure that any future updates do not break existing functionality.
• Added ESLint to also help ensure code quality.
• Updated Tailwind to the latest, v1.9.6.
  • This should have no effect on the output of the plugin, as the output is determined by your Tailwind version and config, not the version used in this repository.
  • That said, it did allow for some behind-the-scenes updates to the demo page, such as the now-built-in purge feature.
• Fixed a low severity NPM security vulnerability with the yargs sub-dependency.