20lives / tailwindcss-rtl Goto Github PK
View Code? Open in Web Editor NEWEnabling bidirectional support on tailwindcss framework
License: MIT License
Enabling bidirectional support on tailwindcss framework
License: MIT License
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.
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!
Honestly curious and figure there's good reason.
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;
}
}
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
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?
example:
translate-s-X
translate-e-X
I can't get tailwindcss-rtl to work in Angular 12 when using ESM ("type": "module" in package.json).
Steps to reproduce:
Working version:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
<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>
Converting it to using ESM:
@import 'tailwindcss/dist/base.min.css';
@import 'tailwindcss/dist/components.min.css';
@import 'tailwindcss/dist/utilities.min.css';
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" />
As vuejs 3 uses vite as default bundler, is there any way to use this package with it?
Sorry for that noob question, I'm still new to frontend.
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.
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
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
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;
}
}
Are you intending to support tailwind V2
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.
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).
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
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?
Say I want to change all the elements to rtl and just keep the navbar as it was. How would one go about it?
Like this for example: <h1 class="text-center lg:text-start">Hello World</h1>
Thanks for this plugin really helpful .
space-x- isn't supported always margin-left is there a work around?
None of them really work. They don't generate the appropriate classes.
"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.
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,
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.
I keep receiving a TypeError when using this plugin, and I think it's because Tailwind has recently dropped support for IE11.
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)
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.
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?
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")],
};
Hi!
Thanks for the useful plugin! I think I'm noticing a bug with unwrapping when using postcss-nested
plugin.
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.
It might be a good idea to have an utility class that would replace left
and right
CSS values. It is a common thing to need to reverse those in RTL designs. Something like end-auto
, end-0
and start-auto
start-0
maybe?
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;
}
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:
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"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.