first space not work well
Closed this issue · 12 comments
Screenshots
Browser/Device (if applicable)
- OS: Any
- Browser: Any
- Version: Any
I think first element has problem.
I need much more context.
@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
Can you share a code snippet for what you did ?
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.
You need to replace to the new utilities names, all explained in the readme.
<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?
Replace space-x-12 with space-s-12
Now I get:
Seems like the plugin isn't working in your project.
@20lives
I think we don't need space-s-{x}
Problem is about finding first element.
So I followed the instructions and got this, as i said I think the plugin isn't working at all in your setup.
@20lives
Hi
Please check https://alighasemzadeh.dev/
I have problem and guide me to fix it.
Soource:https://github.com/alighasemzadeh/alighasemzadeh.dev