Hi I am using the following code to display a link. It has a custom group hover that works perfectly on hover supported devices. Only on touch screen when you click on the link, the div that covers the background gets retained until I click any where on the screen. I have used different states such as active, visited to hide the opacity but none seems to be working for this case.
<div class="group relative md:max-w-md">
<a href="">
<div class="absolute -inset-y-2 -inset-x-4 z-0 rounded-3xl bg-gray-200/50 opacity-0 transition group-hover:opacity-100 dark:bg-gray-700/50"></div>
<div class="z-10 flex flex-col space-y-1 group-hover:relative">
<p class="text-justify tracking-normal">This is the link</p>
<div class="text-accent flex items-center text-sm font-medium">
Know more
<svg viewBox="0 0 16 16" fill="none" class="mt-0.5 ml-1 h-4 w-4 stroke-current">
<path d="M6.75 5.75 9.25 8l-2.5 2.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
</a>
</div>
You can check out the code in tailwind play
tailwind play
Adding GIF for reference. see the part where I use back button gesture and the hover stays.
To disable that on mobile, add breakpoint prefix to class group
This is just an example, you can adjust to the breakpoint prefix you need
<div class="md:group relative md:max-w-md">
...
</div>
Hope this help
Related
I'm trying to make a website using svelte and tailwind. I made a little popup that pops up when you hover over the home icon. But when I later added a div it pops up under the div and does not show fully. How do I fix this?
Code:
Div that popup goes under: (is in seprate svelte component and is imported in index.svelte.)
<div class="fixed ml-15 mb-auto w-screen h-10 bg-gray-700">
<h1 class="text-center text-white font-extrabold text-lg">Welcome.</h1>
</div>
Div for the one of the popups and icons: (this one is also in another separate svelte component and is imported in index.svelte.)
<div class="sidebar-icon group">
<a href="https://github.com/ratinchat" target="_blank">
<DiGithubBadge />
</a>
<span class="sidebar-tooltip group-hover:scale-100">Github</span>
</div>
Css for popup:
.sidebar-tooltip {
#apply absolute w-auto p-2 m-2 min-w-max left-14 rounded-md shadow-md
text-white bg-gray-900
text-xs font-bold
transition-all duration-100 scale-0 origin-left;
}
Helpfull images:
No popups
With popups
The home button popup is hidden under the topbar div.
How can I make it so that the popup (also named tooltip.) pops above the div instead of below. (specifically the home but what if I wanted to make more divs under?) Any help would be greatly appreciated.
Add the TailwindCSS class z-10 or higher to .sidebar-tooltip.
Without setting a z-index your elements will be rendered on the same plane as each other, causing overlaps to occur.
Recently I have been using Tailwind CSS to create a basic navbar for my site. I have it so a button disappears when you are on a small device but I would also like to have the item's centre when I use it on a small device. Here is the code that I have.
<!-- navbar goes here -->
<nav class="bg-gray-100">
<div class="max-w-6xl mx-auto px-8" >
<div class="flex justify-between">
<div class="flex space-x-4 sd:items-center">
<!-- logo -->
<div>
<a href="#" class="flex items-center py-4 px-2 text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
<span>JRRNZ's Stats</span>
</a>
</div>
<!-- primary nav -->
<div class="flex items-center space-x-1">
Bedwars
Skywars
Bazaar
</div>
</div>
<!-- secondary nav -->
<div class="hidden md:flex flex items-center space-x-1">
<a class="py-5 px-3">
<a href="nabartest.html">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 rounded hover:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</a>
</a>
</div>
</div>
</div>
</nav>
On line 5 you can see the attempt I have made by using sd:items-center. If anyone has any solutions or needs any more information please let me know!
Thanks!
Not sure what you're trying to achieve. Are you trying to center it vertically or horizontally? Here's my answer for either:
First things first, you have to keep in mind that tailwindcss, like many frameworks out there is "mobile-first". Meaning the styles get applied starting with small screens; anything beyond that, you'll have to specify. Eg, lets say you have a div which should have a background of red only on small devices but green on the rest of the screens, here's what you'll need to do: <div class="bg-red md:bg-green"></div>. This will apply bg-green to device sizes md and above but small screen will still use bg-red.
With that said, if you're looking to center align the navbar vertically you have to change the sd:items-center to items-center in line 5.
However, if you're looking to center align the navbar items horizontally (which I think is what you're trying to achieve), you'll need to change the justify-between in line 4 to justify-center md:justify-between. You can remove sd:items-center as it has no meaning. No breakpoint named sd: exists in tailwindcss.
Check this out:
https://play.tailwindcss.com/cv0Hw6QcWz?size=746x720
I am not sure how to explain it so I'll provide mostly images, and paste the html from the inspector. But basically, I have two entirely separate parts of my HTML code, they are separated by curly braces and conditions. For some reason, when running the web app, ONLY FOR THE FIRST TIME after reloading, the two elements that are separated are combined. What I mean by this is that one element contains the subelements of the other one. This definitely shouldn't be the case, I added console.logs to verify that the correct item should be displayed and even tho it says ITEM A is being displayed, it is showing ITEM B and adds elements of ITEM A to it. I am super super super confused and you probably are too so I am just gonna leave the code here.
This is my code, it's navigation component with Sidebar that is always visible on desktop but on mobile you have a navbar with a menu icon, when the menu icon is clicked the sidebar expands and pushes the content.
import React, { useState } from "react";
import { useMediaQuery } from "react-responsive";
import {
BellIcon,
ChatAlt2Icon,
CogIcon,
MenuIcon,
} from "#heroicons/react/outline";
export const Sidebar: React.FC = ({ children }) => {
const [isOpen, setOpen] = useState(false);
const isLarge = useMediaQuery({ query: "(min-width: 768px)" });
console.log(isLarge);
return (
<div className={"flex flex-row w-screen h-screen"}>
{/* Sidebar starts */}
{(isOpen || isLarge) && (
<div
id="sidebar"
className={"relative w-64 bg-gray-800 h-screen"}
>
<div className="flex flex-col justify-between">
<div className="px-8">
<ul className="mt-12"></ul>
</div>
<div
className="px-8 border-t border-gray-700"
id="bottom-bar"
>
<ul className="w-full flex items-center justify-between bg-gray-800">
<li className="cursor-pointer text-white pt-5 pb-3">
<BellIcon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></BellIcon>
</li>
<li className="cursor-pointer text-white pt-5 pb-3">
<ChatAlt2Icon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></ChatAlt2Icon>
</li>
<li className="cursor-pointer text-white pt-5 pb-3">
<CogIcon
className="icon icon-tabler icon-tabler-bell"
width={20}
height={20}
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
></CogIcon>
</li>
</ul>
</div>
</div>
</div>
)}
{/* Sidebar ends */}
<div className="flex flex-col w-full h-full">
{/* mobile navbar starts */}
{!isLarge && (
<div
id="mobile-nav"
className="flex h-16 w-full relative bg-gray-800 flex-row items-center p-3"
>
<div className="cursor-pointer text-white pt-5 pb-3">
<MenuIcon
className={"icon icon-tabler icon-tabler-bell"}
width={30}
height={30}
stroke="currentColor"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
onClick={() => {
setOpen(!isOpen);
console.log(isOpen);
}}
></MenuIcon>
</div>
</div>
)}
{/* mobile navbar ends */}
<div className="flex w-full h-full rounded relative">
{children}
</div>
</div>
</div>
);
};
Now here is what's happening, from the video you can see that on fresh reload, it clearly says in the id that it is in fact the mobile nav which shouldn't be visible ( I can confirm it shouldn't with log statements ). But for some reason, the navbar is displayed and the weirdest part, it also has the elements of the sidebar! The mobile navbar only has a menu icon, but on fresh reload it has all of the elements from the sidebar? What is even happening here, why are they being combined and why isn't the sidebar only being displayed when it's a larger screen? Console.logs indicate that the sidebar is being displayed which isn't the case.
This is the fresh reload code
This is after switching to mobile and back (this is how it should be from the start)
Mobile works fine, and desktop works fine after resizing the screen and going back to full screen, but the desktop doesn't work properly on fresh reload.
Since the first load is Server Side Rendered, useMediaQuery will be undefined, while it is not while resizing the screen.
Loading your component with next/dynamic and SSR false should fix the problem.
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/hello3'),
{ ssr: false }
)
I'm not sure about SEO, but if you want to improve UX you can show a loader until you determine if is desktop or not, also i'm not sure why you use useMediaQuery instead of css media query.
Using next.js and Tailwind, I'm trying to place a logo in the upper right corner of the viewport, which I do successfully if said logo is simply a text.
However, whenever I try to display the logo with an img or svg tag it simply doesn't show.
What's even weirder, is that if I keep the text ('a' tag), the logo shows underneath.
I don't know what I'm missing here.
This works (but I don't want the text):
<div className="fixed top-0 right-0 p-4">
<a className="transition duration-200 filter drop-shadow">
luna
</a>
<img
alt="logo"
srcset="svg/logo_white.svg"/>
</div>
This doesn't work (logo doesn't show - I only deleted the 'a' tag):
<div className="fixed top-0 right-0 p-4">
<img
alt="logo"
srcset="svg/logo_white.svg"/>
</div>
I can't seem to wrap my head around it. Can someone enlighten me? Thank you!
Please use this way
import Image from 'next/image'
<div className="fixed top-0 right-0 p-4">
<Image src="svg/logo_white.svg" alt="logo" width="64" height="64" />
</div>
I am working on a webapp that exclusively uses Tailwind for the frontend, and I have constructed a simple sidebar for it like so:
<!--SIDEBAR Element (Tailwind)-->
<div
class="flex flex-col w-full py-8 m-auto text-gray-300 shadow-md justify-around bg-palegray space-y-12 rounded-xl"
>
<!--PENCIL BUTTON-->
<button
class="px-3 mx-auto w-full space-y-4 border-solid border-gray-400 border-r-4"
id="pencil-button"
>
<div class="flex justify-around" id="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8" viewBox="0 0 20 20" fill="currentColor">
<path
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
</svg>
</div>
<p class="text-xs">Draw</p>
</button>
<!--SQUARE BUTTON-->
<button class="px-3 mx-auto ...">
<!--Basically the same markup as the button above-->
</button>
<!--CIRCLE BUTTON-->
<button class="px-3 mx-auto ...">
<!--Basically the same markup as the button above-->
</button>
<!--SPRAY BUTTON-->
<button class="px-3 mx-auto ...">
<!--Basically the same markup as the button above-->
</button>
<!--PATTERN BUTTON-->
<button class="px-3 mx-auto ...">
<!--Basically the same markup as the button above-->
</button>
<!--TEXTURE BUTTON-->
<button class="px-3 mx-auto ...">
<!--Basically the same markup as the button above-->
</button>
</div>
Unfortunately, while it works on Firefox and Chromium-based browsers, it completely breaks on all webkit browsers (such as epiphany and safari). This is what it looks like there:
The problem apparently seems to be the space-y-4 class, which uses css variables and may not work on webkit-based browsers. However, removing this class did not solve the issue. Additionally, I re-ran tailwind to produce vendor prefixes for webkit, but that has not helped solve the issue.
Essentially, I had 2 errors:
Non-semantic HTML
No height attribute for inline SVG icon
Many browsers, including all that are webkit-based (like Safari), do not support using a <button> tag as a flexbox container. The latest versions of Firefox and Chrome support this, but unfortunately many other browsers do not, and instead they ignore all flex classes (e.g. justify-center, space-y-, space-x-) placed within.
This was the issue my code has:
<button class="flex px-3 mx-auto w-full space-y-4" id="pencil-button">
<div class="flex justify-around" id="icon">
<svg></svg>
</div>
<p class="text-xs">Draw</p>
</button>
Notice how there's a div inside of a button. We've applied a flexbox to the button, and added a space-y-4 class to it. This is not considered valid HTML, and therefore is ignored when rendered on a page.
Instead, let's cut every class we've applied to our button, and move all of those classes in the button to a <span>
<button id="pencil-button">
+ <span class="flex px-3 mx-auto w-full space-y-4">
<span class="flex justify-around" id="icon">
<svg></svg>
</span>
<p class="text-xs">Draw</p>
+ </span>
</button>
Now this should work! Notice how we've also replaced every <div> tag with a <span> tag, so that we pass validation.
Backup Solution
This may not always work, and you'll still see an error. That's because webkit browsers do not always scale SVG icons proportionally. If you just specify the width, and not both the width and height, the browser will give the icon an automatic height, which, in most cases, is wrong.
<svg class="w-8" viewBox="0 0 20 20" fill="currentColor">
</svg>
Here, my error was in only specifying the width. To fix this, we need to add both width and height:
<svg class="w-8 h-full" viewBox="0 0 20 20" fill="currentColor">
</svg>
That should fix this issue.
References: https://github.com/tailwindlabs/tailwindcss/issues/2476