RonMelkhior / Tailwindcss Dir
Licence: mit
Adds direction (LTR, RTL) variants to your Tailwind project
Stars: ✭ 156
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tailwindcss Dir
Tailwindcss Rtl
Enabling bidirectional support on tailwindcss framework
Stars: ✭ 118 (-24.36%)
Mutual labels: rtl, tailwindcss
Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️
Stars: ✭ 1,835 (+1076.28%)
Mutual labels: tailwindcss
Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 144 (-7.69%)
Mutual labels: tailwindcss
Pinlayout
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]
Stars: ✭ 1,870 (+1098.72%)
Mutual labels: rtl
React Laravel Boilerplate
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting
Stars: ✭ 146 (-6.41%)
Mutual labels: tailwindcss
Codrops Libre
A reponsive single page app template for collection management projects
Stars: ✭ 124 (-20.51%)
Mutual labels: tailwindcss
Notus Nextjs
Notus NextJS: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 152 (-2.56%)
Mutual labels: tailwindcss
Figmatocode
Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.
Stars: ✭ 2,299 (+1373.72%)
Mutual labels: tailwindcss
Wp Tailwind
A WordPress starter theme that utilizes Tailwind + PurgeCSS.
Stars: ✭ 135 (-13.46%)
Mutual labels: tailwindcss
Logic
CMake, SystemVerilog and SystemC utilities for creating, building and testing RTL projects for FPGAs and ASICs.
Stars: ✭ 149 (-4.49%)
Mutual labels: rtl
Sage
WordPress starter theme with a modern development workflow
Stars: ✭ 11,531 (+7291.67%)
Mutual labels: tailwindcss
Vue Cli Plugin Tailwind
vue-cli plugin for Tailwind CSS
Stars: ✭ 154 (-1.28%)
Mutual labels: tailwindcss
React Webpack 5 Tailwind 2
React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Stars: ✭ 155 (-0.64%)
Mutual labels: tailwindcss
Tailwind Direction
Tailwind Direction adds a custom direction variant to your tailwind project,
letting you have custom CSS rules for LTR and RTL layouts.
Note: This package requires Tailwind >= v1.0.1.
Getting started
Install the package via NPM/Yarn.
# Yarn
yarn add tailwindcss-dir --dev
# NPM
npm install tailwindcss-dir --save-dev
Now, setup the plugin in your Tailwind config's plugins section.
Currently the plugin doesn't offer any configuration.
plugins: [
require('tailwindcss-dir')(),
],
Finally, you can use the plugin and add it to modules you want to use it with.
variants: {
float: ['responsive', 'direction'],
margin: ['responsive', 'direction'],
padding: ['responsive', 'direction'],
},
Usage
The plugin adds ltr and rtl variants to your modules. With the default Tailwind configuration, you can use them like so:
<div class="text-green text-2xl ltr:pl-4 rtl:pr-4">
Hello world.
</div>
License
Tailwind Direction is licensed under the MIT license.
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].