Comments (12)
I need much more context.
from tailwindcss-rtl.
@20lives
I am using tailwindui
https://tailwindui.com/components/marketing/sections/contact-sections#component-dec976a631662b509173ba8b848c49cd
but when I use tailwindcss-rtl it give me
https://user-images.githubusercontent.com/26847446/115188924-e5a50f00-a0fa-11eb-90ff-0f630f39432f.png
from tailwindcss-rtl.
Can you share a code snippet for what you did ?
from tailwindcss-rtl.
These are my plugins:
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), require('tailwindcss-rtl')]
after that I add dir="rtl" in html tag.
it looks first spacing has problem.
i don't change any code of tailwindui.
from tailwindcss-rtl.
You need to replace to the new utilities names, all explained in the readme.
from tailwindcss-rtl.
<ul class="mt-8 flex space-x-12" role="list">
<li>
<a class="text-indigo-200 hover:text-indigo-100" href="#">
<span class="sr-only">Facebook</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" aria-hidden="true">
<path d="M22.258 1H2.242C1.556 1 1 1.556 1 2.242v20.016c0 .686.556 1.242 1.242 1.242h10.776v-8.713h-2.932V11.39h2.932V8.887c0-2.906 1.775-4.489 4.367-4.489 1.242 0 2.31.093 2.62.134v3.037l-1.797.001c-1.41 0-1.683.67-1.683 1.653v2.168h3.362l-.438 3.396h-2.924V23.5h5.733c.686 0 1.242-.556 1.242-1.242V2.242C23.5 1.556 22.944 1 22.258 1" fill="currentColor" />
</svg>
</a>
</li>
<li>
<a class="text-indigo-200 hover:text-indigo-100" href="#">
<span class="sr-only">GitHub</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" aria-hidden="true">
<path d="M11.999 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.386.6.11.819-.26.819-.578 0-.284-.01-1.04-.017-2.04-3.337.724-4.042-1.61-4.042-1.61-.545-1.386-1.332-1.755-1.332-1.755-1.09-.744.082-.73.082-.73 1.205.086 1.838 1.238 1.838 1.238 1.07 1.833 2.81 1.304 3.493.996.109-.775.419-1.303.762-1.603C7.145 17 4.343 15.97 4.343 11.373c0-1.31.468-2.382 1.236-3.22-.124-.304-.536-1.524.118-3.176 0 0 1.007-.323 3.3 1.23.956-.266 1.983-.4 3.003-.404 1.02.005 2.046.138 3.005.404 2.29-1.553 3.296-1.23 3.296-1.23.655 1.652.243 2.872.12 3.176.77.838 1.233 1.91 1.233 3.22 0 4.61-2.806 5.624-5.478 5.921.43.37.814 1.103.814 2.223 0 1.603-.015 2.898-.015 3.291 0 .321.217.695.825.578C20.565 21.796 24 17.3 24 12c0-6.627-5.373-12-12.001-12" fill="currentColor" />
</svg>
</a>
</li>
<li>
<a class="text-indigo-200 hover:text-indigo-100" href="#">
<span class="sr-only">Twitter</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" aria-hidden="true">
<path d="M7.548 22.501c9.056 0 14.01-7.503 14.01-14.01 0-.213 0-.425-.015-.636A10.02 10.02 0 0024 5.305a9.828 9.828 0 01-2.828.776 4.94 4.94 0 002.165-2.724 9.867 9.867 0 01-3.127 1.195 4.929 4.929 0 00-8.391 4.491A13.98 13.98 0 011.67 3.9a4.928 4.928 0 001.525 6.573A4.887 4.887 0 01.96 9.855v.063a4.926 4.926 0 003.95 4.827 4.917 4.917 0 01-2.223.084 4.93 4.93 0 004.6 3.42A9.88 9.88 0 010 20.289a13.941 13.941 0 007.548 2.209" fill="currentColor" />
</svg>
</a>
</li>
</ul>
How to fix it? pleae guide me?
from tailwindcss-rtl.
Replace space-x-12
with space-s-12
from tailwindcss-rtl.
from tailwindcss-rtl.
Seems like the plugin isn't working in your project.
from tailwindcss-rtl.
@20lives
I think we don't need space-s-{x}
Problem is about finding first element.
from tailwindcss-rtl.
So I followed the instructions and got this, as i said I think the plugin isn't working at all in your setup.
from tailwindcss-rtl.
@20lives
Hi
Please check https://alighasemzadeh.dev/
I have problem and guide me to fix it.
Soource:https://github.com/alighasemzadeh/alighasemzadeh.dev
from tailwindcss-rtl.
Related Issues (20)
- Support for ESM HOT 1
- why aren't the native css "text-align: start" and end used? HOT 3
- tailwind-rtl not working when the parent dir="rtl" in version 0.8.0 HOT 5
- Plugin doesn't work with Tailwind v3 HOT 5
- Tailwind 3.0 RTL Search Patterns HOT 2
- :not([dir="rtl"]) is breaking everything HOT 6
- Question: Why does this not use `border-(start|end)-(start|end)-radius`? HOT 1
- Negative inset classes not working.
- Vite support? HOT 10
- Support for arbitrary values? HOT 5
- Negative values not being generated HOT 7
- inset
- right-* left-* classes to be start-* and end-* HOT 1
- [Question] Anyone tried using `tailwindcss-rtl` along with `twin.macro`? HOT 1
- Add support for `before`, `after` and right or left values
- Add support to space-x-() HOT 1
- dependency conflict when install tailwindcss-rtl package
- does not support negative margins i.e. -ms-x
- add support for bg-end bg-start
- How to ignore the change to rtl for certain elements?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwindcss-rtl.