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
Related
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">
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 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
I'm currently using Tailwind / TailwindUI and I would like to scale down ALL items.
Eg I go to my website and Zoom out so everything becomes smaller and the zoom level is 85%
I would like my website to appear at this scale (85%) when a normal user visits.
How would I go about doing this in tailwind?
You can use transform & scale property to achieve this.
Just add transform along with the scale-95 etc.
Visit for more reference :-
https://tailwindcss.com/docs/scale
https://tailwindcss.com/docs/transform
A simple solution to this is using the browser's built in zoom functionality.
document.body.style.zoom = "85%"
I've tested this on Chrome 101.
This is functional Alpine.js component that achieves dynamically changing browser's zoom percentage:
<div x-data="{zoom:100}" class="flex bg-teal-600 text-white mx-3 my-2 rounded-md text-sm font-medium">
<div #click="document.body.style.zoom = `${zoom-=10}%`" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 pl-3 rounded-l">-</div>
<div x-text="zoom" class="px-2 pt-1"></div>
<div #click="document.body.style.zoom = `${zoom+=10}%`" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 rounded-r">+</div>
</div>
I am using datetimepicker of NG-ZORRO and try to customize the style:
Want to achive:
width being responsive
no outline when hover and focus
What I have done is:
nzSize="large" [nzStyle]="{'width': '440px'}"
and modify large to 50px in ng-zorro's theme.less file, it works but the width is fix length.
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-last-name">
Start DateTime
</label>
<nz-date-picker nzSize="large" [nzStyle]="{'width': '440px'}" [nzMode]="dateMode" nzShowTime (nzOnOpenChange)="handleDateOpenChange($event)"
(nzOnPanelChange)="handleDatePanelChange($event)">
</nz-date-picker>
</div>
See how it looks in a form, the end datetime is default input box size:
Has anyone customized before and please help!