This plugin doesn't seem to use logical properties and values

[bboro]

Describe the bug

Installed the plugin and re-compiled my theme.

In the compiled CSS file there are no logical properties or values to be found. However I can now see that the plugin simply adds [dir=ltr] (or [dir=rtl]) in front of classes such as ml/mr etc:

[dir=ltr] .ml-2{margin-left:.5rem}
[dir=rtl] .ml-2{margin-right:.5rem}

According to the plugin readme, shouldn't this instead just be:

.ml-2 { margin-inline-start: .5rem}

Which terms did you search for in the documentation and issue tracker?

(Write your answer here if relevant.)

Environment

• Tailwind 3.1.8

[thibaudcolas]

Hi @bboro, I think you must be talking about another plugin? There is nothing in tailwindcss-vanilla-rtl that outputs dir attributes. Here is the code: https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/blob/main/src/corePlugins.js. You’ll see all mentions of "dir" and "ltr" are in commented-out code.

[bboro]

I think you must be talking about another plugin?

This plugin is definitely installed. I can see a reference to this package in my package-lock.json: https://registry.npmjs.org/tailwindcss-vanilla-rtl which points to this repo.

There is nothing in tailwindcss-vanilla-rtl that outputs dir attributes

It's strange indeed. If I remove the plugin from my tailwind.config.js the dir attribute classes are gone from the compiled CSS which is weird.

I'm thinking this is something to do with core tailwind's handling of RTL maybe? Just a wild guess at this point.

How it's set up currently:

const vanillaRTL = require("tailwindcss-vanilla-rtl");

module.exports = {
  theme: {
    extend: {
       ...
    }
  },
  content: [
    // Look in the twig files.
    './templates/**/*.html.twig',
    // A preprocess function might inject a class.
    './themename.theme',
    // Custom modules.
    '../../../modules/custom/**/*.php',
    '../../../modules/custom/**/*.html.twig',
  ],
  safelist: [
    // Add here custom class names.
    // https://tailwindcss.com/docs/content-configuration#safelisting-classes
  ],
  plugins: [
    vanillaRTL,
  ],
  corePlugins: {
    ...vanillaRTL.disabledCorePlugins
  }
};

[thibaudcolas]

Well this looks spot on, that’s very puzzling 🤔 . Are you sure this configuration is what’s actually being used?

I’ve checked again and there are no [dir] attribute declarations in the output of the demo site (https://thibaudcolas.github.io/tailwindcss-vanilla-rtl/out.css), as expected.

Here is a Tailwind Playground configured with this plugin in the configuration: https://play.tailwindcss.com/ZEu1PnMLMM. Perhaps give this a go with some of your code and you’ll see what output to normally expect?

---

It could also be that you have something like postcss-logical or similar installed, which converts the code on the fly for browser compatibility?