I have a react project where I use tailwind. I have an index.css file that I am importing at the root of my project. The index.css file looks like this: @import "tailwindcss/base"; @import "@navikt/ds-css"; @import "@navikt/ui-common/styles/index.css"; @import "tailwindcss/components"; @import "tailwindcss/utilities";…
I want to have the sponsored text and image wrap to the bottom of the logo on mobile but flex-wrap does not seem to be doing it. I would like the 50x50 image and the 'sponsored by" text to go…
I'm trying to layout some search result cards using tailwind. The cards are arranged using css grid while the content inside the cards - a header image, a title, and some metadata - are laid out using flex. The intention…
I am re-writing my question after digging further and finding that this issue is only evident on some devices, suggesting its related to viewport size. As you can see in the code, the parent has a set height + width…
I have a carousel made with framer-motion. The carousel works just fine, but I also want to add a link to each item in the carousel and when I try to do that the CSS breaks and the carousel moves…
No problems shown within my code, whenever I am trying to pull out the mobilesidebar, it appears white. I get this message. My exact message Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was…
I just can figure out why the right button has not enough padding. <div class="col-span-2 flex gap-0.5 items-center justify-between"> <p>Wie möchten Sie ihre Antwort erhalten?</p> <div class="grid grid-cols-2 gap-1.5"> <div class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white" > E-Mail…
I have a page built with Tailwind which is loading a table of data in the bottom left of the page. However, this is overflowing quite a lot and I'd ideally like it to size itself to the available space…
i am new with react native and typescript. in this project i want to use the tailwind css and follow instruction at nativewind to config tailwind.config.js like this /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./App.tsx", "./src/**/*.{js,jsx,ts,tsx}", ],…
So, I'm using nextjs + svgr + tailwind in my app. I'm dynamically changing size and color of my svgs, but I also want to add "flex-shrink-0 fill-current" globally to all my icons. I want to render my icon with:…