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
Is there a way to add border-top with tailwind? Before you say it, i did look at the documentation and searched on google. I don't need border-top-width i need exactly border-top. Also its ok to use just in time css.
Try this:
<div class="h-20 w-20 bg-gray-300 flex justify-center items-center">
<div class="border-t-4 border-black h-5 w-5 bg-white mt-"></div>
</div>
Live example: https://play.tailwindcss.com/aUPhlY2DrZ
Those are the properties you are searching for:
class="border-t-4 border-black"
And here the documentation if you need more details:
https://tailwindcss.com/docs/border-width#individual-sides
I'm using TailwindCSS to create a rounded button with a "+" in the middle. I'm using a flexbox to centre the plus character horizontally and vertically.
Vertical alignment starts going off if I increase the font size of the plus character too much. If I keep it small it works fine.
The current code is:
<div className="w-20 h-20 rounded-full bg-primary fixed bottom-10 right-10 cursor-pointer">
<div className="flex h-full justify-center items-center text-secondary text-5xl p-0">+</div>
</div>
and renders into this:
I am trying to make a 404 page with Nextjs and typescript. Here are the screenshots:
As you see, I have the scrollbar on both the right and bottom sides and they are breaking the responsiveness.
I gave the background color to make this noticeable.
Here's my code...
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
interface Props {}
const ErrorPage: React.FC<Props> = ({}) => {
const router = useRouter();
return (
<>
<div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">
<svg
className="p-6 lg:p-48 fill-current text-gray-300"
viewBox="0 0 445 202"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
// viewBox="0 0 24 24"
>
<path
d="M137.587 154.953h-22.102V197h-37.6v-42.047H.53v-33.557L72.36 2.803h43.125V124.9h22.102v30.053zM77.886 124.9V40.537L28.966 124.9h48.92zm116.707-23.718c0 22.46 1.842 39.643 5.525 51.547 3.684 11.905 11.23 17.857 22.64 17.857 11.411 0 18.89-5.952 22.44-17.857 3.548-11.904 5.323-29.086 5.323-51.547 0-23.54-1.775-40.97-5.324-52.29s-11.028-16.98-22.438-16.98c-11.41 0-18.957 5.66-22.64 16.98-3.684 11.32-5.526 28.75-5.526 52.29zM222.759.242c24.887 0 42.339 8.76 52.356 26.28 10.018 17.52 15.027 42.406 15.027 74.66s-5.01 57.095-15.027 74.525c-10.017 17.43-27.47 26.145-52.356 26.145-24.887 0-42.339-8.715-52.357-26.145-10.017-17.43-15.026-42.271-15.026-74.525 0-32.254 5.009-57.14 15.026-74.66C180.42 9.001 197.872.241 222.76.241zm221.824 154.711h-22.102V197h-37.6v-42.047h-77.355v-33.557l71.83-118.593h43.125V124.9h22.102v30.053zM384.882 124.9V40.537l-48.92 84.363h48.92z"
fillRule="nonzero"
/>
</svg>
</div>
<div className="h-screen w-screen flex justify-center items-center relative z-10">
<div className="p-6 text-center">
<h2 className="uppercase text-xl lg:text-5xl font-black">
We are sorry, Page not found!
</h2>
<p className="mt-3 uppercase text-sm lg:text-base font-semibold text-gray-900">
The page you are looking for might have been removed had its name
changed or is temporarily unavailable.
</p>
<div className="text-center">
<Link href="/">
<a
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/3 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Back To Homepage
</a>
</Link>
<button
onClick={() => router.back()}
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/4 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Go Back
</button>
</div>
</div>
</div>
</>
);
};
export default ErrorPage;
Is this happening because of h-screen and w-screen or is something wrong with flex? But if I don't use them, I don't make it to work as I am expecting which is placing one div above the other (absolute). I am probably looking at this code for too long and I am lost in space.
So, what am I doing wrong here? Thanks.
I would suggest to have a parent relative div
<div class="h-screen w-screen relative">
<!-- 404 -->
<div class="bg-gray-900 flex justify-center items-center absolute inset-0 z-0"> // inset-0 is important
<svg></svg>
</div>
<!-- content -->
<div class="flex justify-center items-center absolute inset-0 z-10">
</div>
</div>
I replicated your design.
I would recommend changing h-screen to min-h-screen.
You can check out an example using your code in the following link.
https://play.tailwindcss.com/eD7VEDN5AR
"width: 100vw" is breaking the page layout. There's a horizontal scrollbar appearing on the page.
That's because the w-screen property means "width: 100vw" (the element with such a property is supposed to consume the whole available device screen space horizontally).
As you have a vertical scrollbar on the page body () (as the body is probably bigger in height than the screen height (= 100vh)), you'll always have less gorizontal space than 100vw, as the horizontal space is also consumed by the vertical scrollbar.
It's not a TailwindCSS-related issue, but rather a CSS-related bug.
The vertical scrollbar's width is usually ~12 px, but it differs between OS'es and screen sizes.
What I think would be better is if CSS would count the available screen width for the 100vw property considering the scrollbar width, like 100vw = real screen width - (vertical scrollbar's width, if one is present).
"(height: 100vh // max-height: 100vh)" is breaking the page layout. There's a vertical scrollbar appearing
That's because the w-screen property means "width: 100vw" (the element with such a property is supposed to consume the whole available device screen space horizontally).
As you have a vertical scrollbar on the page body () (as the body is probably bigger in width than the screen width (= 100vw)), you'll always have less vertical space than 100vh, as the vertical space is also consumed by the horizontal scrollbar.
The horizontal scrollbar's width is usually ~12 px, but it differs between OS'es and screen sizes.
For this case CSS could count the property for the 100vh value like 100vh = real screen height - (horizontal scrollbar's height, if one is present).
What can be done now:
You better use width: 100% and height: 100% properties instead of width: 100vw and height: 100vh
It's always risky to use the vh and vw values. Why would you need that? Semantically, the child should always be smaller than the parent.
This is the same ugly workaround as hiding the problems with overflowing with "overflow-x: hidden".
So your code should look like:
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
interface Props {}
const ErrorPage: React.FC<Props> = ({}) => {
const router = useRouter();
return (
<>
<div className="bg-gray-900 h-full w-full flex justify-center items-center absolute z-0">
<svg
className="p-6 lg:p-48 fill-current text-gray-300"
viewBox="0 0 445 202"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
// viewBox="0 0 24 24"
>
<path
d="M137.587 154.953h-22.102V197h-37.6v-42.047H.53v-33.557L72.36 2.803h43.125V124.9h22.102v30.053zM77.886 124.9V40.537L28.966 124.9h48.92zm116.707-23.718c0 22.46 1.842 39.643 5.525 51.547 3.684 11.905 11.23 17.857 22.64 17.857 11.411 0 18.89-5.952 22.44-17.857 3.548-11.904 5.323-29.086 5.323-51.547 0-23.54-1.775-40.97-5.324-52.29s-11.028-16.98-22.438-16.98c-11.41 0-18.957 5.66-22.64 16.98-3.684 11.32-5.526 28.75-5.526 52.29zM222.759.242c24.887 0 42.339 8.76 52.356 26.28 10.018 17.52 15.027 42.406 15.027 74.66s-5.01 57.095-15.027 74.525c-10.017 17.43-27.47 26.145-52.356 26.145-24.887 0-42.339-8.715-52.357-26.145-10.017-17.43-15.026-42.271-15.026-74.525 0-32.254 5.009-57.14 15.026-74.66C180.42 9.001 197.872.241 222.76.241zm221.824 154.711h-22.102V197h-37.6v-42.047h-77.355v-33.557l71.83-118.593h43.125V124.9h22.102v30.053zM384.882 124.9V40.537l-48.92 84.363h48.92z"
fillRule="nonzero"
/>
</svg>
</div>
<div className="h-full w-full flex justify-center items-center relative z-10">
<div className="p-6 text-center">
<h2 className="uppercase text-xl lg:text-5xl font-black">
We are sorry, Page not found!
</h2>
<p className="mt-3 uppercase text-sm lg:text-base font-semibold text-gray-900">
The page you are looking for might have been removed had its name
changed or is temporarily unavailable.
</p>
<div className="text-center">
<Link href="/">
<a
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/3 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Back To Homepage
</a>
</Link>
<button
onClick={() => router.back()}
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/4 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Go Back
</button>
</div>
</div>
</div>
</>
);
};
export default ErrorPage;
In the case of TailwindCSS, you should use h-full and w-full instead of h-screen and w-screen.
Also, in your specific case it's this line that was breaking everything, most likely:
<div className="h-screen w-screen flex justify-center items-center relative z-10">
As you already have this applied to the parent element:
<div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">
It's all wrong semantically in your code. This is ugly work-arounding.
You haven't provided the tailwind.config.js, so some of the colors in the demo are missing due to missing custom TailwidnCSS class names values.
But this is basically the same code with an exception of eplacing all -screen properties with -full and also removing the bottom padding of the svg, as on most of the screens, the svg has too much spacing and then consumes >100vh space of the screen and is not positioned at the center vertically, but rather has starneg white space at the bottom of the page.
https://dpd0jl.sse.codesandbox.io/
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!