I have the following problem. I have input and on left on it I want to have icon. Everything looks fine until I focus on the input. In such case right border (probably shadow in fact) seems to be smaller than other ones (no idea why?)
Code for this is:
<div class="m-10">
<label class="block text-sm font-medium text-gray-700">
Password
</label>
<div class="mt-1 relative rounded-md flex">
<input type="password"
class="flex-1 appearance-none block w-full border border-gray-300 rounded-l-md focus:ring-cyan-500
focus:outline-none sm:text-sm">
<span class="inline-flex items-center px-3 rounded-r-md border-l-0 border border-gray-300 bg-gray-50 text-gray-500 sm:text-sm cursor-pointer">
Some icon
</span>
</div>
However when I switch order of elements (first icon and then input and switch some classes) then on focus it looks fine.
So the questions are:
How to fix it (without changing markup much as it's simplified comparing to real usage scenario)
Why border seems to be different on focus
Why switching order of elements make the difference
Working example comparing 2 cases on TailwindPlay
You can fix it by adding the class relative to the input.
The outline ("border") is actually the same in both examples. In the second example, the icon element covers the outline. As you can see in this interactive example, elements that appear later in the dom, are "higher" than the elements before them.
Adding position: relative; activates z-index automatically and puts the element on top of the elements around it.
z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
The Z-Index CSS Property: A Comprehensive Look
Related
I want to focus a div surrounding a button but only when keyboard focused. Usually focus-within works, but in this case it should only focus on keyboard focus (focus-visible:) and not when clicking with the mouse(focus:).
Essentially, I need to combine focus-within and focus-visible. How can this be done?
Tailwind Play: https://play.tailwindcss.com/ApDB5gSjqv
<div class="flex h-screen items-center justify-center">
<div class="rounded-lg bg-green-100 px-20 py-20 focus-within:ring-4 focus-within:ring-blue-300">
<button class="bg-green-200 px-6 py-3 focus:outline-none">Focusable Button</button>
</div>
</div>
Notes:
Based on this thread, it looks like w3c doesn't have support for focus-within-visible. What's an alternative or round-about way to achieve this?
It looks like there is support for :has(:focus) selector in some browsers but how should this be applied in Tailwind...? Source
Instead of using focus-within you could add relative to the div you want to make look focused with the ring. Then make the button a peer and have an absolutely positioned div after it use the peer-focus-visible modifier to add any "focused" styles you want.
EDIT: You'll need to make the div be behind the button by adding relative to the button and assigning an appropriate z-index value to both the inset div and button.
<div class="flex h-screen items-center justify-center">
<div class="rounded-lg bg-green-100 px-20 py-20 relative">
<button class="bg-green-200 px-6 py-3 focus:outline-none peer relative z-[1]">Focusable Button</button>
<div class="absolute inset-0 rounded-lg peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 z-[0]"></div>
</div>
Here is an edited example on Tailwind Play https://play.tailwindcss.com/us5kpJg6cV
I'm trying to style a form using, but when I put in the margin for the left and right (mx-4), it is only add the margin on the left side and on the right side it's going off of the page.
export default function TextArea() {
return (
<div className="w-full mt-1 ">
<p className="text-purple-800 font-medium px-4 py-1">
What are you thinking?
</p>
<textarea
rows={4}
name="comment"
id="comment"
className="w-full sm:w-auto md:w-2/3 mx-4 h-96 rounded-md border-white sm:text-md placeholder-gray-300 text-black"
placeholder="Type your idea here..."
/>
</div>
)
}
I see you are using full width w-full for the div also the same thing for text area.
Here when you give w-full it will take the full with of the parent. Here Div is taking full width of its parent and text area is taking the width of div. Here you need to check the div's parent and set the correct width to it.
I believe mx-4 is being applied at the other end of the text area. You can inspect and see this in your browser
The problem is due to w-full. The class w-full on the parent div is causing the form to take up the full width of its parent container.
Change it to mx-auto
Change this
<div className="w-full mt-1 ">
to
<div className="mx-auto mt-1">
I have managed to create a border which is cut at an angle in the following way ->
https://play.tailwindcss.com/b9oILu69my
Basically, I have a big container, inside of it I have a smaller container where I'm placing the border and setting the color of the bottom/right borders to transparent, in this way achieving what I am looking for.
Now I am trying to do the same thing, however, I want the border to be placed on the bottom-right side instead of the top-left
I've tried hundreds of variations of the code shown in the playground, but to no avail.
To be even more precise in what exactly I am trying to achieve ->
Detailed example
Any help would be appreciated!
I would take a somewhat different approach, by using an absolute positioned rotated div, within a div with overflow-hidden. If you keep the main image (the yellow square) centered with m-auto, the border will be the same size on both sides. On the yellow div you need to set a z-index that is higher then the rotated div.
<div class="flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="relative flex m-auto h-40 w-40 overflow-hidden rounded-lg">
<div class="absolute top-8 left-8 m-auto h-96 w-96 bg-blue-200 rotate-45"></div>
<div class="top-3 z-30 right-3 m-auto rounded-lg h-32 w-32 bg-yellow-300"></div>
</div>
</div>
You can find my Tailwind playground example here
You can play with the height and width of the div’s using arbitrary values, like w-[48rem] and rotate-[60deg].
Edit: this example looks more like yours.
Hope this helps.
Consider the following button:
<button class="relative flex flex-row items-center justify-center w-56 h-[52px] space-x-2 bg-gray-400">
<div class='absolute top-0 left-0 flex items-center justify-center w-6 h-6 text-[11px] font-light text-white rounded-full bg-blue-600'>4</div>
<span class="text-xl font-medium text-black">Notifications</span>
</button>
Here, the absolutely positioned div is affecting the position of the span following it in the code. However, if we move the div to after the span, the absolutely position div behaves as expected and is removed from the flow of the document.
I've never experienced this before, which is why I'm writing in. I've always understood an absolutely positioned element will be positioned absolutely regardless of where it's placed in the parent container.
There's a reproducible example here
Edit: I have tried removing any flexbox styling from the div, but it makes no difference
Making the div absolute won't stop it acquiring the margin applied to it via space-x-2 when it's not the first visible child.
I'm embedding React Draft Wysiwyg component within a flexbox. The flexbox should consist of this component alongside a circle div.
For some reason, the circle div gets squished and is not circular, but instead is narrower than it should be.
I can reduce this 'squishiness' by passing the wrapperClassName prop and adding w-fit (which is the Tailwind equivalent of width: fit-content; in pure CSS), however, the circle is still squished on narrower screens.
Image:
Code:
<div className='flex gap-x-2 items-center w-full min-w-[480px] h-full py-3 px-2 bg-gray-50 rounded'>
{/* Rich text editor component */}
<Editor
wrapperClassName='w-fit'
/>
{/* Circle */}
<div className={'group w-9 h-9 rounded-full'} />
</div>
How can I get the Editor component to take all remaining width without taking away the space that the circle div needs to remain a proportional circle?
You could give the Editor w-full and give the circle a p-5 instead of w-9
Is this what you meant: https://play.tailwindcss.com/cPxzlro2re