Css – The list is moving when one item is selected
I have a list of menu items. The goal is for the font to become bold when I select one of the items. However, when I do this, the other items shift slightly. I tried to add width, but then…
Html – CSS: How to position divs that crosses sections
I am coding a very simple, standard landing page that has multiple sections, which look like this. It's very trendy right now. It's basically an oversized section header with lots of padding, big text, and an element that looks like…
Difficulty mapping background images in React app with Tailwind CSS
I am currently working on a React app where I'm using Tailwind CSS for styling. I have an array of items (trending), and I'm trying to map through them to create a set of divs with background images. However, I'm…
Css – Class does not exist in @Apply layer using Tailwind
just what I think will be a simple solution, but I can't find it. I have found similar problems with people using the Hover style and a white space right after, witch is wrong. But it is not my case.…
Css – Using :has in Tailwind with adjacent sibling selectors
I have the following CSS, which works as intended. [data-type='transfer']:has(+ [data-type^='sale_']) { opacity: 0.25; } It looks at data attributes and will hide elements with data-type="transfer if they are adjacent to elements containing data attributes starting with "sale_". For clarity,…
Reactjs – Why do all input feilds now have a blue outline after installing flowbite?
I recently installed flowbite-react to my react app and now all input fields across my whole app have a blue outline when focused. Even when I apply styles to remove the outline, nothing seems to work. Everything installed properly and…
Reactjs – Unable to get TailwindCSS working with React + Vite
I followed the installation process for TailwindCSS from the official docs, but am unable to get it to work. This is how my relevant files look: tailwind.config.js /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme:…
Css – Tailwind – responsive + fixed width rules not being applied
I have a div that has several "steps" in size: <div class="flex flex-row sm:w-full lg:w-1024 xl:w-1400"> My problem is that no matter the screen with, the sm:w-full class is the only one that ever gets applied. This seems to be…
Html – How to prevent child inheriting parent height without assigning height using taiwind
I dont want child to inherit paren height and i want the child to expand according to the content in it. And dont want to assign height as well as i dont know much content will be in it. <div…
Reactjs – Text in not getting truncated even after adding classname truncate in tailwind css
screen shot of how the text is looking. The code: <div className='flex flex-col'> {/* {details.name} */} sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss <span className='text-muted-foreground'> <p className='truncate max-w-full'> {/* {details.address} */} ssssssssssssssssssssssssssssssssssssssssssssssssss </p> </span> </div> Even after using truncate , text-clip, the text is not getting…