20lives / tailwindcss-rtl Goto Github PK

View Code? Open in Web Editor NEW

345.0 6.0 33.0 410 KB

Enabling bidirectional support on tailwindcss framework

License: MIT License

JavaScript 100.00%

css tailwindcss rtl logical direction tailwindcss-rtl ltr

tailwindcss-rtl's Introduction

tailwindcss-rtl

Introduction

Internationalization in semitic languages needs more than just translating texts, you would also need to mirror the layout horizontally. This can be done by adding dir="rtl" the the layout body tag, but this is propably not be enough and you will need to create a different style for RTL.

With tailwindcss-rtl plugin you will be able to support both RTL and LTR in the same style.

Live demo

Full live demo based on the official tailwindcss course project is available here:

Workcation live demo

Workcation-nuxt-i18n-rtl

Usage

Replace all utilities based on Right/Left with the new utilities specified below.

for example when you create an LTR layout and you would like to add left padding to an element you would normaly use pl-6, left is the start direction in LTR so you will replace it with ps-6.

Now add dir="rtl" or dir="ltr" attribute to your top level layout element:

<body dir="rtl">

Note: for all utilities to work as expected adding the dir attribute (both "rtl"/"ltr") to a top level tag is mandatory), even when "ltr" is assumed to be default.

Installation

Install tailwindcss-rtl package:

# Yarn
yarn add tailwindcss-rtl --dev

# NPM
npm install tailwindcss-rtl --save-dev

Require tailwindcss-rtl in the project tailwind.config.js file:

plugins: [
  require('tailwindcss-rtl'),
],

Utilities

*tailwindcss-rtl adds the start and end notations as substitue for left and right.

Class	Description
ps-[X]	padding on start direction
pe-[X]	padding on end direction
ms-[X]	margin on start direction
me-[X]	margin on end direction
text-start	text aligned at the start direction
text-end	text aligned at the end direction
float-start	float to start direction
float-end	float to end direction
start-[X]	placement of positioned elements on start
end-[X]	placement of positioned elements on end
clear-start	clear to start direction
clear-end	clear to end direction
rounded-s-[X]	rounded borders on start direction
rounded-e-[X]	rounded borders on end direction
rounded-ts-[X]	rounded borders on top start direction
rounded-te-[X]	rounded borders on top end direction
rounded-bs-[X]	rounded borders on bottom start direction
rounded-be-[X]	rounded borders on bottom end direction
border-s-[X]	border width on start direction
border-e-[X]	bordern width on end direction
space-s-[X]	space between child
divide-s-[X]	border width between child elements

tailwindcss-rtl's People

Stargazers

Watchers

tailwindcss-rtl's Issues

Support for arbitrary values?

Hi,

I am not sure if this is because I have a prefix configured, but when I try to generate the following with arbitrary values:

class="tw-start-[var(--inset-start)]"

The associated class is not generated. Is this expected ?

Thanks!

end-0 cannot be applied

Hi,

The utility class end-0 won't work if used in an apply directive.
It works when used in the html.

Other utilities like pe-0 or ms-10 works when applied.

Is this something known ?

Add support to space-x-()

space-x adds left margin to all child elements except the 1st one. if the directions is rtl, it needs to somehow add right margin, not left.

How to use responsive variants for this plugin's utilities?

Like this for example: <h1 class="text-center lg:text-start">Hello World</h1>

Not working with Craco and React during production

I am using tailwindcss with React using CRACO. The Rtl to Ltr switching is working fine during dev. But during production (Netlify) All of the classes which were supposed to be coming from rtl plugin are not there. I went through the code several time. On the inspector, It looks like during prod those classes don't get generated.

Here is my Tailwind config file

module.exports = {
	purge: ["./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}"],
	darkMode: "class", // or 'media' or 'class'
	theme: {
		extend: {
			colors: {
				background: "var(--color-background)",
				backgroundSoft: "var(--color-background-soft)",
				backgroundSofter: "var(--color-background-softer)",
				accent: "var(--color-accent)",
				accentSoft: "var(--color-accent-soft)",
				accentSofter: "var(--color-accent-softer)",
				accentSoftest: "var(--color-accent-softest)",
				secondary: "var(--color-secondary)",
				secondarySoft: "var(--color-secondary-soft)",
				secondarySofter: "var(--color-secondary-softer)",
				secondarySoftest: "var(--color-secondary-softest)",
				online: "var(--color-online)",
				away: "var(--color-away)",
				offline: "var(--color-offline)",
			},
		},
	},
	variants: {
		extend: { backgroundColor: ["checked"], borderColor: ["checked"], outline: ["focus", "checked"] },
	},

	plugins: [require("@tailwindcss/forms"), require("tailwindcss-rtl")],
};

Size variation priority

Hi, I have a scenario which I need set text align to start by default and set it to center on SM break-point.
So set these class: text-start sm:text-center
The result is not correct:

The text-start will override sm:text-center

There is a need to change flex-row -> flex-row-reverse

Hi,

To make right arrangement of flex items when there is a flex-row parent, it needs to convert flex-row-reverse
as a good sample you can check this component :

https://tailwindcomponents.com/component/tailwindcss-flow-chart

This manual modification to final css created by tailwind did the job for me:

[dir="ltr"] .flex-row {
flex-direction: row;
}

[dir="ltr"] .flex-row-reverse {
flex-direction: row-reverse;
}

[dir="rtl"] .flex-row {
flex-direction: row-reverse;
}

[dir="rtl"] .flex-row-reverse {
flex-direction: row;
}

of course I made these change to all other flex-row classes for sm, md, lg, xl and 2xl

Thanks,

[Question] Anyone tried using `tailwindcss-rtl` along with `twin.macro`?

Has anyone around here tried using tailwindcss-rtl along with twin.macro?

I love both libs and I have to create a demo project for a talk on i18n and rtl designs and I am wondering if anyone attempted this combination before... I would test it myself, but I am a little bit time constrained. :)

My assumption is that it should work without issues. However, tailwindcss-rtl is a plugin for tailwind which expects directives to be in className I am left unsure if there is some sort of compatibility issues, since twin.macro full out expects you to use tw and css props instead and I know for certain that twin.macro does not support some tailwind directives.

tailwind-rtl not working when the parent dir="rtl" in version 0.8.0

I had a problem with tailwind-rtl version 0.8.0.

everything works fine in LTR mode but when I change the direction the pseudo selector :not([dir="rtl"]) keep working and cause the element to apply CSS to both directions - start and end - .

I manage to have a fixed solution by going to the previous version 0.7.2

I noticed that in version 0.8.0 the CSS class are like that :


@media (min-width: 768px) {
    :not([dir="rtl"]) .md\:rounded-ts-huge {
        border-top-left-radius: 150px;
    }
}
@media (min-width: 768px) {
    [dir="rtl"] .md\:rounded-ts-huge {
        border-top-right-radius: 150px;
    }
}

but in version 0.7.2

@media (min-width: 768px) {
    ([dir="ltr"]) .md\:rounded-ts-huge {
        border-top-left-radius: 150px;
    }
}
@media (min-width: 768px) {
    [dir="rtl"] .md\:rounded-ts-huge {
        border-top-right-radius: 150px;
    }
}

I believe that this causes the problem.

my env is:
angular version 13.
scss
tailwindcss@latest

Tailwind V2

Are you intending to support tailwind V2

TypeError after Tailwind v2.0.1

Description

I keep receiving a TypeError when using this plugin, and I think it's because Tailwind has recently dropped support for IE11.

Stack Trace

TypeError: target is not a function
    at generators (\node_modules\tailwindcss-rtl\src\paddingUtilities.js:4:3)
    at module.exports (\node_modules\tailwindcss-rtl\src\paddingUtilities.js:18:20)
    at \node_modules\tailwindcss-rtl\src\index.js:16:16
    at \node_modules\tailwindcss\lib\util\processPlugins.js:69:5
    at Array.forEach (<anonymous>)
    at _default (\node_modules\tailwindcss\lib\util\processPlugins.js:63:11)
    at \node_modules\tailwindcss\lib\processTailwindFeatures.js:60:54
    at LazyResult.runOnRoot (\node_modules\postcss\lib\lazy-result.js:276:16)
    at LazyResult.runAsync (\node_modules\postcss\lib\lazy-result.js:328:26)
    at LazyResult.async (\node_modules\postcss\lib\lazy-result.js:178:30)

Negative inset classes not working.

Plugin doesn't work with Tailwind v3

Running this plugin with Tailwind 3 in a Nuxt project gives the following error:

TypeError: Cannot read properties of undefined (reading 'parent')

The plugins documentation on Tailwind mentions different parameters to the plugin() function between v2 and v3, notably the absence of variants param (which makes sense considering that all variants are enabled by default in the JIT engine).

Negative values not being generated

"tailwindcss": "^3.0.24",
"tailwindcss-rtl": "^0.9.0"

When using negative values (like -ms-16) the proper CSS is not being generated. I've just updated from Tailwind 2 and the plugin in version 0.7 where everything worked like charm.

divide-s doesn't support screen prefixes

It seems that divide-s doesn't work if prefixed with a screen, like md:divide-s.

At the moment I had to use a custom solution:

.rtl-md-divide > * + *{
  @screen md {
    @apply border-s;
  }
}

Vite support?

As vuejs 3 uses vite as default bundler, is there any way to use this package with it?

:not([dir="rtl"]) is breaking everything

the change you did in the 0.8.0 is not working as you would expect. You can see a screen shot here where :not([dir="rtl"]) and [dir="rtl"] are both valid.

Although [dir="rtl"] matches the tag selector, :not([dir="rtl"]) will match the selector.

Support for ESM

I can't get tailwindcss-rtl to work in Angular 12 when using ESM ("type": "module" in package.json).
Steps to reproduce:

Working version:

Create a simple Angular 12 project using the CLI with "ng new a", select 'add Routing' and use SCSS.
Install tailwindcss with "npm i tailwindcss" and init it with "npx tailwindcss init". The version it installed was 2.2.7.
Install tailwindcss-rtl with "npm i -D tailwindcss-rtl". The version it installed was 0.7.3.
Add "require('tailwindcss-rtl')" to the 'plugins' section in the 'tailwind.config.js' file.
Add the following lines to 'src/styles.scss':

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Add the following lines at the end of the 'src/app/app.component.html' file:

<div dir="rtl" style="width: 100%;">
  <button class="ms-4 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>
</div>

Run it with "ng serve". I'm using VS-Code so I created a Chrome configuration in launch.json with "url": "http://localhost:4200".
As you can see, the "ms-4" directive adds a margin before the "Hello" button at the bottom of the page. "ms-4" is translated to "margin-inline-start: 1rem;".

Converting it to using ESM:

Stop the "ng serve" process.
Add to package.json: "type": "module"
"ng serve" will no longer work because 'tailwind.config' is a '.js' file. Change its to extension to '.cjs' and run "ng serve" again.
The tailwind classes no longer work because the '@import' lines don't work anymore. To make them work, I had to change them to:

@import 'tailwindcss/dist/base.min.css';
@import 'tailwindcss/dist/components.min.css';
@import 'tailwindcss/dist/utilities.min.css';

Tailwind works but tailwindcss-rtl doesn't work now. The "ms-4" directive is not a recognized class anymore.

The RTL classes can't be applied to @apply

I'm trying to add custom rtl classes to @apply variable and I get this error

@apply cannot be used with .ps-4 because .ps-4 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .ps-4 exists, make sure that any @import statements are being properly processed *before* Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

first space not work well

Screenshots

Browser/Device (if applicable)

OS: Any
Browser: Any
Version: Any

I think first element has problem.

add transform support

example:
translate-s-X
translate-e-X

Fix to make select dropdown arrow show on left side when using tailwindcss-forms

I ran into an issue with making the arrow for the select dropdown show on the left side of the box with for rtl languages. This is an issue specific to the tailwindcss-forms plugin as it adds in the arrow as a background image.

Not sure if tailwindcss-rtl is the right place for this but here is the quick fix I made.

[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-left: 2.5rem;
}

does not support negative margins i.e. -ms-x

Is there any plan in supporting these negative margins which are necessary to handle gaps or spaces in complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.

Generator for insetUtilities doesn't seem to work

We're using tailwindcss-rtl, but for some reason the insetUtilities aren't being loaded.
As a result, when we apply the start-0 modifier in our CSS, the build phase will throw the following error:

(49:0) @applycannot be used with.start-0because.start-0either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that.start-0exists, make sure that any@importstatements are being properly processed *before* Tailwind CSS sees your CSS, as@apply can only be used for classes in the same CSS tree.

For other classes, like the padding utilities, it all works fine and as expected.
Any idea where to look?

Cannot create 1px borders with border-s and border-e

First, thanks for this tailwind plugin. I like the approach for making tailwind support right to left languages.

I ran into an issue creating 1px width borders using border-s and border-e.

In tailwind I can use border-l to create a 1px border on the left of a container. Similar with border-r. However, border-s and border-e does not behave this way.

My options are:

Create 2px border with border-s-2
Use this to set border and remove other sides "border border-e-0 border-t-0 border-b-0"

dependency conflict when install tailwindcss-rtl package

Hello everyone
I have a problem with install tailwindcss-rtl in my angular v12 project with this npm error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @fullcalendar/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@"^12.0.0 || ^13.0.0-0" from @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR! peer @angular/cdk@"12.2.1" from @angular/[email protected]
npm ERR! node_modules/@angular/material
npm ERR! peer @angular/material@"12.2.1" from @angular/[email protected]
npm ERR! node_modules/@angular/material-moment-adapter
npm ERR! @angular/material-moment-adapter@"12.2.1" from the root project
npm ERR! 1 more (the root project)
npm ERR! @angular/cdk@"12.2.1" from the root project
npm ERR! peer @angular/common@"12.2.1" from @angular/[email protected]
npm ERR! node_modules/@angular/forms
npm ERR! peer @angular/forms@"^12.0.0 || ^13.0.0-0" from @angular/[email protected]
npm ERR! node_modules/@angular/material
npm ERR! peer @angular/material@"12.2.1" from @angular/[email protected]
npm ERR! node_modules/@angular/material-moment-adapter
npm ERR! @angular/material-moment-adapter@"12.2.1" from the root project
npm ERR! 1 more (the root project)
npm ERR! peer @angular/forms@"^10.0.0 || ^11.0.0 || ^12.0.0" from [email protected]
npm ERR! node_modules/ngx-quill
npm ERR! ngx-quill@"14.2.0" from the root project
npm ERR! 1 more (the root project)
npm ERR! 8 more (@angular/material, @angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^9.0.0" from @fullcalendar/[email protected]
npm ERR! node_modules/@fullcalendar/angular
npm ERR! @fullcalendar/angular@"4.4.5-beta" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@"^9.0.0" from @fullcalendar/[email protected]
npm ERR! node_modules/@fullcalendar/angular
npm ERR! @fullcalendar/angular@"4.4.5-beta" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

how can I fix it?

How to integrate with svelte?

Sorry for that noob question, I'm still new to frontend.

Spaceing

Thanks for this plugin really helpful .
space-x- isn't supported always margin-left is there a work around?

inset

Hi, thank you for your plugin. please consider adding following as well:

inset-inline-start // "left" in ltr and "right" in rtl
inset-inline-end
inset-block-start
inset-block-end

How to ignore the change to rtl for certain elements?

Say I want to change all the elements to rtl and just keep the navbar as it was. How would one go about it?

Add support for `before`, `after` and right or left values

When trying to use content in before and after, I found no solution. Is it something that tailwind supports by itself or this package needs to implement this?

Tailwind 3.0 RTL Search Patterns

Now that Tailwind 3.0 supports RTL I wanted to migrate my codebase to use it.

Instead of manually changing every class this plugin provides I came up with the following regex patterns and replacements:

# Paddings
([ '"])([a-z]+:)*ps-(px|[.0-9]+)\b                       $1ltr:$2pl-$3 rtl:$2pr-$3
([ '"])([a-z]+:)*pe-(px|[.0-9]+)\b                       $1ltr:$2pr-$3 rtl:$2pl-$3

# Margins
([ '"])([a-z]+:)*([-])?ms-(auto|px|[.0-9]+)\b            $1ltr:$2$3ml-$4 rtl:$2$3mr-$4
([ '"])([a-z]+:)*([-])?me-(auto|px|[.0-9]+)\b            $1ltr:$2$3mr-$4 rtl:$2$3ml-$4

# Text
([ '"])([a-z]+:)*text-start\b                            $1ltr:$2text-left rtl:$2text-right
([ '"])([a-z]+:)*text-end\b                              $1ltr:$2text-right rtl:$2text-left

# Floats
([ '"])([a-z]+:)*float-start\b                           $1ltr:$2float-left rtl:$2float-right
([ '"])([a-z]+:)*float-end\b                             $1ltr:$2float-right rtl:$2float-left

# Positional
([ '"])([a-z]+:)*([-])?start-(auto|full|px|[./0-9]+)\b   $1ltr:$2$3left-$4 rtl:$2$3right-$4
([ '"])([a-z]+:)*([-])?end-(auto|full|px|[./0-9]+)\b     $1ltr:$2$3right-$4 rtl:$2$3left-$4

# Clears
([ '"])([a-z]+:)*clear-start\b                           $1ltr:$2clear-left rtl:$2clear-right
([ '"])([a-z]+:)*clear-end\b                             $1ltr:$2clear-right rtl:$2clear-left

# Rounded
([ '"])([a-z]+:)*rounded-s(-[-./0-9a-z]+)?\b             $1ltr:$2rounded-l$3 rtl:$2rounded-r$3
([ '"])([a-z]+:)*rounded-e(-[-./0-9a-z]+)?\b             $1ltr:$2rounded-r$3 rtl:$2rounded-l$3
([ '"])([a-z]+:)*rounded-ts(-[-./0-9a-z]+)?\b            $1ltr:$2rounded-tl$3 rtl:$2rounded-tr$3
([ '"])([a-z]+:)*rounded-te(-[-./0-9a-z]+)?\b            $1ltr:$2rounded-tr$3 rtl:$2rounded-tl$3
([ '"])([a-z]+:)*rounded-bs(-[-./0-9a-z]+)?\b            $1ltr:$2rounded-bl$3 rtl:$2rounded-br$3
([ '"])([a-z]+:)*rounded-be(-[-./0-9a-z]+)?\b            $1ltr:$2rounded-br$3 rtl:$2rounded-bl$3

# Borders
([ '"])([a-z]+:)*border-s(-[-./0-9a-z]+)?\b              $1ltr:$2border-l$3 rtl:$2border-r$3
([ '"])([a-z]+:)*border-e(-[-./0-9a-z]+)?\b              $1ltr:$2border-r$3 rtl:$2border-l$3

I didn't cover space-s-[X] and divide-s-[X] classes as there doesn't seem to be any left / right classes for those. 🤷‍♂️

I also used the following regex to look for usages of the classes provided by this plugin (probably not super exhaustive):

([ '"])([a-z]+:)*([-]?(start|end|m[se])[-]|\b((clear|float|text)[-](start|end)|(divide|space)[-]s|border-[se]|p[se][-]|rounded-[tb]?[se])\b)

Perhaps this will be useful for others looking to do the same too.

why aren't the native css "text-align: start" and end used?

the current implementation doesn't work when aligning text to the start or the end based on direction. the rules seem to conflict with each other.

what's the reasoning behind using this:

const utilities = () => ({
  '[dir="rtl"] .text-start': { 'text-align': 'right' },
  '[dir="rtl"] .text-end': { 'text-align': 'left' },
  ':not([dir="rtl"]) .text-end': { 'text-align': 'right' },
  ':not([dir="rtl"]) .text-start': { 'text-align': 'left' },
});

module.exports = utilities;

when surely this will suffice?

  '.text-start': { 'text-align': 'start' },
  '.text-end': { 'text-align': 'end' },

see these videos

Peek.2021-11-20.14-38.mp4

Peek.2021-11-20.15-00.mp4

im not sure if this is related to #25, but it seems like it might be

as a work around, ive put this in my Tailwind.postcss file:

@tailwind base;
@tailwind components;
@tailwind utilities;
  
@layer utilities {
  .text-start {
    text-align: start !important;
  }
  .text-end {
    text-align: end !important;
  }
}

Consider the following pcss:

.element-a {
  .element-a-inner {
    .title {
      @apply ps-1;
    }
  }
}

This gets compiled into css:

.element-a .element-a-inner [dir="rtl"] .title {
  padding-right: 0.25rem;
}

.element-a .element-a-inner [dir="ltr"] .title {
  padding-left: 0.25rem;
}

which seems wrong. I think it should be:

[dir="rtl"] .element-a .element-a-inner .title {
  padding-right: 0.25rem;
}

[dir="ltr"] .element-a .element-a-inner .title {
  padding-left: 0.25rem;
}

This ends up breaking some elements' layout as paddings are no longer applied.

flipping space-x-4 margin right and left

using the default Tailwindcss demo

           <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
                <div className="flex-shrink-0">
                    <img className="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
                </div>
                <div className="text-start" >
                    <div className="text-xl font-medium text-black">ChitChat</div>
                    <p className="text-gray-500">You have a new message!</p>
                </div>
            </div>

I notice that space-x-4 does not flip the margin right and left when applying dir="rtl"

right-* left-* classes to be start-* and end-*

Is there a fix for the right-* and left-* classes?

My suggestion is to change the keywords right and left to end and start respectively.

In this manner, the classes will be labelled start-3, end-4, etc.

Alternately, just switch Right/Left according to the parent's direction.

Currently, the solution I came up with is:

<div className="ltr:right-3 rtl:left-3" />

add support for bg-end bg-start

I'm currently using bg-left and bg-right in some designs, and it seems we don't have bg-start and bg-end right now
it would be nice to have