{"id":13480187,"url":"https://github.com/20lives/tailwindcss-rtl","last_synced_at":"2025-05-16T12:08:56.737Z","repository":{"id":37661629,"uuid":"253896588","full_name":"20lives/tailwindcss-rtl","owner":"20lives","description":"Enabling bidirectional support on tailwindcss framework","archived":false,"fork":false,"pushed_at":"2023-01-24T10:04:24.000Z","size":410,"stargazers_count":357,"open_issues_count":17,"forks_count":32,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-02T08:05:05.392Z","etag":null,"topics":["css","direction","logical","ltr","rtl","tailwindcss","tailwindcss-rtl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/20lives.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-07T19:49:28.000Z","updated_at":"2025-03-10T22:01:19.000Z","dependencies_parsed_at":"2023-02-08T11:45:16.014Z","dependency_job_id":null,"html_url":"https://github.com/20lives/tailwindcss-rtl","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/20lives%2Ftailwindcss-rtl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/20lives%2Ftailwindcss-rtl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/20lives%2Ftailwindcss-rtl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/20lives%2Ftailwindcss-rtl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/20lives","download_url":"https://codeload.github.com/20lives/tailwindcss-rtl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018032,"owners_count":21034046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","direction","logical","ltr","rtl","tailwindcss","tailwindcss-rtl"],"created_at":"2024-07-31T17:00:35.502Z","updated_at":"2025-04-09T10:02:30.237Z","avatar_url":"https://github.com/20lives.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  tailwindcss-rtl\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://workcation-rtl.netlify.com/en/\" \u003e\n    \u003cimg src=\"https://i.imgur.com/QSY8nNU.gif\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/tailwindcss-rtl\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/tailwindcss-rtl.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/tailwindcss-rtl\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/tailwindcss-rtl.svg\" alt=\"Latest Release\"\u003e \u003c/a\u003e\n\u003c/p\u003e\n\n\n## Introduction\n\nInternationalization in semitic languages needs more than just translating texts, you would also need to mirror the layout horizontally.\nThis 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.\n\nWith **tailwindcss-rtl** plugin you will be able to support both RTL and LTR in the same style.\n\n## Live demo\n\nFull live demo based on the official tailwindcss course project is available here: \n\n[Workcation live demo](https://workcation-rtl.netlify.app/en/)\n\n[Workcation-nuxt-i18n-rtl](https://github.com/20lives/workcation-nuxt-i18n-rtl)\n\n## Usage\n\nReplace all utilities based on Right/Left with the new utilities specified below.\n\nfor 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`.\n\nNow add  `dir=\"rtl\"` or `dir=\"ltr\"` attribute to your top level layout element:\n\n```html\n\u003cbody dir=\"rtl\"\u003e\n```\n\n\n**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._\n\n## Installation\n\nInstall **tailwindcss-rtl** package:\n\n```bash\n# Yarn\nyarn add tailwindcss-rtl --dev\n\n# NPM\nnpm install tailwindcss-rtl --save-dev\n```\n\nRequire `tailwindcss-rtl` in the project `tailwind.config.js` file:\n\n```javascript\nplugins: [\n  require('tailwindcss-rtl'),\n],\n```\n\n## Utilities\n\n**tailwindcss-rtl* adds the *start* and *end* notations as substitue for *left* and *right*.\n\n| Class          | Description                               | \n| -------------- | ----------------------------------------- |\n| ps-[X]         | padding on start direction                |\n| pe-[X]         | padding on end direction                  |\n| ms-[X]         | margin on start direction                 |\n| me-[X]         | margin on end direction                   |\n| text-start     | text aligned at the start direction       |\n| text-end      | text aligned at the end direction         |\n| float-start    | float to start direction                  |\n| float-end      | float to end direction                    |\n| start-[X]      | placement of positioned elements on start |\n| end-[X]        | placement of positioned elements on end   |\n| clear-start    | clear to start direction                  |\n| clear-end      | clear to end direction                    |\n| rounded-s-[X]  | rounded borders on start direction        |\n| rounded-e-[X]  | rounded borders on end direction          |\n| rounded-ts-[X] | rounded borders on top start direction    |\n| rounded-te-[X] | rounded borders on top end direction      |\n| rounded-bs-[X] | rounded borders on bottom start direction |\n| rounded-be-[X] | rounded borders on bottom end direction   |\n| border-s-[X]   | border width on start direction           |\n| border-e-[X]   | bordern width on end direction            |\n| space-s-[X]    | space between child                       |\n| divide-s-[X]   | border width between child elements       |\n\n[npm-version]: https://img.shields.io/npm/v/tailwindcss-rtl.svg?style=flat-square\n[npm-downloads]: https://img.shields.io/npm/dw/tailwindcss-rtl?style=flat-square\n[npm]: https://www.npmjs.org/package/tailwindcss-rtl\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F20lives%2Ftailwindcss-rtl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F20lives%2Ftailwindcss-rtl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F20lives%2Ftailwindcss-rtl/lists"}