[IntelliSense] text direction warnings

[stijns96]

Hi there 👋🏻 ,

We have to implement RTL support for our client. The thing is that our devs are not used to develop this way. Potential issue is that when we add a new dev to the project, they might not be aware of this. Of course we have to do a proper handover, but it would be really nice and helpful if this could be a configuration setting as well.

The idea is to give a warning of someone uses e.g. pr-1 instead of pe-1.

Thanks in advance and like to hear others thoughts :)

[zikou058]

That’s a very valid concern, especially for large-scale applications with multiple contributors.

While Tailwind itself focuses on utility generation, the best way to enforce this is through Linting. You can use the eslint-plugin-tailwindcss and configure a custom rule or use the no-custom-classname rule with some adjustments.

Alternatively, a more straightforward approach would be to use a specific ESLint functional rule like no-restricted-syntax. You can set it up to throw a warning whenever it detects pr-, pl-, mr-, or ml- and suggest using ps-, pe-, ms-, and me- instead.

This way, the warning will appear directly in the developer's VS Code before they even commit the code

[zikou058]

Exemple ESLint config:
"no-restricted-syntax": [ "error", { "selector": "Literal[value=/^p[rl]-/]", "message": "Please use 'ps-' or 'pe-' instead of 'pl-' or 'pr-' to support RTL." } ]

[stijns96]

Trying to add this, but I don't think this will work in my case. I need to have this validation inside .liquid files.

[stijns96]

Hi @zikou058,

Thanks for the great suggestion! However, I'm curious why some of these checks are done with the extension and this needs to be in the linter? TBH, I didn't knew about the eslint plugin, will definitely try it out, especially with auto fixing!

Just curious why this couldn't be part of the extension? Also since the V4 support of the eslint plugin is ongoing and not updated in 6 months

[zikou058]

Thanks for the reply! The reason I suggested the linter (ESLint) over the extension is that ESLint can catch these issues during the CI/CD process or pre-commit hooks. This ensures the RTL standards are followed even if a developer doesn't have the specific extension installed.

Regarding the v4 support, you're right about the delay. Maybe integrating these RTL linting rules directly into the core Tailwind engine or a modern official plugin would be a more future-proof solution than relying on the current ESLint plugin. What do you think?

[stijns96]

Mhh, got the ESLint part! Just feels a bit as overlap. It might be really nice if Tailwind could have it's own dedicated ESLint plugin. So that would be a great idea I would say.

I know TW is going through a hard time (company I'm working for is now officially sponsoring ❤️ ). So I'm not expecting anything anytime soon, but still would be really nice addition for TW