I want to place the avatar label texts to be vertically centered of the avatar image <div class="flex flex-wrap"> <div class="flex mr-8"> <div class="rounded-full overflow-hidden w-24 h-24"> <img src="https://via.placeholder.com/150" alt="Avatar" class="w-full h-full object-cover" /> </div> <div class="ml-4"> <span class="text-lg font-bold…
Working on a simple grid with image and text. using Next 13.4.7 and tailwind, But when I try to import the image using Next Image component and using the fill prop the image doesn't render. return ( <button className="relative group…
I'm not new, but also not super experienced with Nuxt3, and I'm having trouble with my tailwind CSS. I'm trying to have the text change color from white to black, but it seems to not be registering the change in…
I have this: <div class="overflow-scroll resize-none w-full max-w-full flex flex-col-reverse"> <textarea id="content" rows="1" class="min-h-full bg-white rounded shadow px-6 py-4 w-full max-w-full resize-none" placeholder="Type here..." oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'" style="overflow: hidden;" ></textarea> </div> The component is then…
I'm using DaisyUI and TailwindCSS I'm using a drawer and steps. <div class="drawer"> <input id="my-drawer" type="checkbox" class="drawer-toggle" /> <div class="drawer-content"> <!-- Page content here --> <label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label> <ul class="steps"> <li class="step step-primary">Register</li> <li class="step step-primary">Choose plan</li>…
I am trying to achieve dynamically display of span elements horizontally. When there is no place left, let them move uncut on the second line and so on. Right now it looks close but not what is expected the code…
I have a problem I need to solve with CSS selectors. I am trying to make automatic color overrides for Tailwind to have our site always comply to WCAG guidelines. I have a tailwind plugin I've written which automatically fixes…
I am newbie in js. I installed tailwind to update my website, to make it responsive. It works fine after upgraded computer to win 10 (goodbye 7). But in VSCode, i have to run : "npx tailwindcss -i ./src/css/input.css -o…
I know in plain css you can set the min and max width. but when I try min-h-10 and max-h-10 it doesn't do anything in tailwind. So this is what I have: <body> <div class="flex-col justify-center"> <div class="h-10 w-10 border…
I have the following HTML element, which appears as shown. <div className="flex col-span-2 row-span-2 h-screen border-blue-500 border-4 justify-center items-center"> <div className='flex bg-blue-300 h-full w-full justify-center items-center '> <div className='text-4xl'>some text</div> </div> </div> I would like to have a margin between…