20lives / Tailwindcss Rtl
Licence: mit
Enabling bidirectional support on tailwindcss framework
Stars: ✭ 118
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tailwindcss Rtl
Tailwindcss Dir
Adds direction (LTR, RTL) variants to your Tailwind project
Stars: ✭ 156 (+32.2%)
Mutual labels: rtl, tailwindcss
Goodwork
Self hosted project management and collaboration tool powered by TALL stack
Stars: ✭ 1,730 (+1366.1%)
Mutual labels: tailwindcss
Neat Starter
Starter Template for Netlify CMS, Eleventy, Alphine JS & Tailwind CSS
Stars: ✭ 104 (-11.86%)
Mutual labels: tailwindcss
Saas Vuejs Tailwindcss
VueJS + TailwindCSS frontend for SaaS apps.
Stars: ✭ 107 (-9.32%)
Mutual labels: tailwindcss
Banking System
A banking System Created Using Django Python Web Framework
Stars: ✭ 105 (-11.02%)
Mutual labels: tailwindcss
Instagram
Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Instagram Using React
Stars: ✭ 109 (-7.63%)
Mutual labels: tailwindcss
Spacebook
💥 Create fast and simple documentation to explain almost anything. Uses Eleventy, Tailwind 2.0, and Alpine JS with an optional Netlify CMS.
Stars: ✭ 104 (-11.86%)
Mutual labels: tailwindcss
Vue Telescope Analyzer
Detect Vue technologies running on a website ✨
Stars: ✭ 117 (-0.85%)
Mutual labels: tailwindcss
Jet
It‘s (j)ust (e)leventy and (t)ailwind … OK, and a few other things; it‘s still *really* small though.
Stars: ✭ 111 (-5.93%)
Mutual labels: tailwindcss
Tailwindcss
A utility-first CSS framework for rapid UI development.
Stars: ✭ 50,879 (+43017.8%)
Mutual labels: tailwindcss
Sb Admin2
this is an RTL Version of sb-admin2 Template, one of free template series in startbootstrap.com , (download remain file from startbootstrap.com)
Stars: ✭ 107 (-9.32%)
Mutual labels: rtl
Sapper Firebase Typescript Graphql Tailwindcss Actions Template
A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions
Stars: ✭ 111 (-5.93%)
Mutual labels: tailwindcss
Tailwindcss Transforms
[DEPRECATED] Tailwind CSS plugin to generate transform utilities
Stars: ✭ 106 (-10.17%)
Mutual labels: tailwindcss
React Native Design Utility
Utility for building design system in react-native. Idea from TailwindCSS
Stars: ✭ 116 (-1.69%)
Mutual labels: tailwindcss
Windicss
Next generation utility-first CSS framework.
Stars: ✭ 1,355 (+1048.31%)
Mutual labels: tailwindcss
Nextjs Wordpress Starter
WebDevStudios Next.js WordPress Starter
Stars: ✭ 104 (-11.86%)
Mutual labels: tailwindcss
Vue Notus
Vue Notus: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 108 (-8.47%)
Mutual labels: tailwindcss
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:
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">
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] | float to start direction |
| end-[X] | float to end direction |
| 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 |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].