I have it where my header and footer wrap the outlet of my pages but I would like the header and footer to be hidden on certain pages such as the customer and admin dashboard. What would be the best…
I'm attempting to use the Tailwind headlessui <Switch> component in a Vue3/InertiaJS app, and when I put it in my component as it is in the docs, using an enabled ref() variable for the value, it works fine. However, when…
I can't seem to center a div the normal way with react and tailwind whatever I try I get this Her is my code: "use client"; import Image from "next/image"; import React from "react"; const LoginPage = () => {…
I have a product card which has an image, name tag (span) and a price tag (h3): export default function Product() { return ( <div className="mx-auto"> <div className="w-[160px] h-[160px] sm:w-[250px] sm:h-[250px] md:w-[320px] md:h-[320px] lg:w-[200px] lg:h-[200px] xl:w-[240px] xl:h-[240px] bg-gray-100 rounded-sm"> <img…
I'm trying to align the text and the icon to be vertically aligned in my navbar. I made the icons inline with the text, but any padding that I give to it to separate the icon and text afterwards results…
This is the Next JS code for Navbar on all pages, initially it changes the color of the elements from white to black when scrolling below 950 px, but I want the Navbar elements on another page "/lodge/page.tsx" not to…
I have an unordered list. I want to append the word "and" at the end of each item, except the last. <ul className="ml-4"> { categories.map((category, Idx) => ( <li key={category.id} className="last:text-red-400"> {category.description} <span className="last:hidden">; AND</span> </li> ) } </ul> Actual…
So I am fetching the urls from a firestore database and then using those urls for the img tags. However, the issue I am facing is that when the page loads the array is empty but if I make a…
This NextJS code changes the color of the Navbar elements after 950 px below and if the Navbar appears on a separate page, however, when switching to another page there is a delay in changing the Navbar colors until I…
Using tailwind css, I can center an absolutely positioned element in its relative container: <svg class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">...</svg> Using tailwind css, I can make an absolutely positoined element spin: <svg class="absolute animate-spin">...</svg> But when I try to center…