Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yassinebridi/tailwind-direction
Tailwind bi-directionality plugin
https://github.com/yassinebridi/tailwind-direction
bidi bidirectional internationalization ltr rtl tailwind tailwindcss
Last synced: about 2 months ago
JSON representation
Tailwind bi-directionality plugin
- Host: GitHub
- URL: https://github.com/yassinebridi/tailwind-direction
- Owner: yassinebridi
- License: mit
- Created: 2021-01-29T12:08:51.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-02T11:47:51.000Z (almost 4 years ago)
- Last Synced: 2024-09-19T11:49:51.460Z (3 months ago)
- Topics: bidi, bidirectional, internationalization, ltr, rtl, tailwind, tailwindcss
- Language: JavaScript
- Homepage: https://tailwind-direction.vercel.app
- Size: 314 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tailwind-direction  [](https://opensource.org/licenses/mit-license.php) [](https://twitter.com/yassinebridi)
A tailwindcss plugin, that makes working with directions a breeze.
> Check out the [Live Example](https://tailwind-direction.vercel.app/) to try it for yourself.
## Installation
```bash
$ npm install --dev tailwind-direction
# or
$ yarn add -D tailwind-direction
```
## Usage
- Add the tailwind-direction plugin to the `tailwind.config.js` file
```js
plugins: [
require('tailwind-direction').default,
],
```
- Extend our configuration preset which disables the core tailwind
plugins we replace (otherwise, directional utilitites will produce
both left and right css rules at the same time).
```js
presets: [
require("tailwind-direction").configPreset,
],
```
> ⚠ **Warning:** If you are modifing `corePlugins` in your own
> `tailwind.config.css`, you have to use the object syntax while
> extending our configuration preset. This is because the array syntax
> [does not support
> merging](https://tailwindcss.com/docs/presets#core-plugins) and your
> own configuration will have priority. If you must use the array syntax
> you have to manually disable [all the core plugins we
> replace](https://github.com/yassinebridi/tailwind-direction/blob/main/README.md#affected-core-plugins).
- Change the html tag `dir` attribute:
```html
...
```
`dir` can be:
```ts
dir: 'ltr' | 'rtl';
```
That's it, now your tailwind utilities works out of the box with directions in mind.
## Comparison
There are two other know packages that solves the same problem:
- [tailwindcss-dir](https://github.com/RonMelkhior/tailwindcss-dir): This package adds new variants `ltr`, `rtl`, that you have to add for every utility by hand.
- [tailwindcss-rtl](https://github.com/20lives/tailwindcss-rtl): This package takes a different and a better approach, instead of adding new variants, you replace the targeted variants, like `mr`, `rounded-bl`, with it's direction corresponding utilites: `ms`, `rounded-be`
- [tailwind-direction 🚀](https://github.com/yassinebridi/tailwind-direction): What this package does, is replacing the core utilites, with direction in mind ones, so you can just plug-in this packages and you are done, no refractoring proccess needed.
## Affected core plugins
Currently the affected core plugins are:
- borderRadius
- borderWidth
- clear
- divide
- float
- inset
- margin
- padding
- space
- textAlign
- transformOrigin
## Not Affected core plugins(But needs to be):
- (Add new ones if you think others are missing)
## You might like
I created another plugin that makes working with bi-direction less painful with Next.js, check it out:
https://github.com/yassinebridi/next-direction