NextJS project has been created already with tailwind support so I didn't set up it by myself When I add className on html element on component in pages/ folder it simply doesn't work even thought Elements panel in DevTools shows…
I have a simple timeline on my website with cards. The cards get placed on the timeline using a simple function. But some of the cards overlap. I want to make it so if a card overlaps it gets put…
I have a slide component that I want to use to create a carousel in React. I want to use the images in the public/images folder as background images for the carousel. I created an array of objects where the…
I'm trying to display a layout for a page that's dependent on it being the width of a phone. If it's screen width, I want to display cards else, a table. Does anyone know how to do this using tailwind's…
I've tried different solutions I found here on Stackoverflow but no luck in adding a background image to a section. Here's where I'm currently at. import Image from '../../public/images/header2.jpg'; const Home: React.FC = () => { return ( <main className="super-donnie-bg-slate">…
I am trying Nextjs and tailwind css i created a simple page with that but now i am facing a problem that i want to make the button a linear gradient color border in tailwind css how can i do…
I need this to change from the current image file to a desktop image when the screen size reaches a minimum width of 375px . im using tailwind css as my pre processor. <img src="images/bg-curve-mobile.svg" />
I'm finishing my undergraduate degree and creating a website as my course's final project to promote my research. I'm learning next.js just for this. I have this sidebar in my layout.tsx, but I want to hide the "menuAlt" component only…
I have some custom colors defined, VSCode does not show color previews and I have to manually check to remember which one to use, even with color naming. Are there any settings/extensions that allow me to preview the HSL colors…
Here is a snippet of a basic breadcrumb using Tailwind: <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" /> <div class="max-w-md"> <ul class="flex items-center"> <li class="flex items-center"> <a href=""> <svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439…